Pure CSS Table with Horizontal Borders
Last Updated :
30 Jan, 2022
A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In Pure CSS, we will add a “pure-table” class to add styles to the table. This class adds padding and borders to table elements and emphasizes the header.
A table with Horizontal Borders is a table that has only a horizontal border. To make the horizontal bordered table, we will add the “pure-table-horizontal” class.
Pure CSS Table with Horizontal Borders Class:
- pure-table-horizontal: This class is used to create the horizontal bordered table. This class is used with a pure-table class.
Syntax:
<table class="pure-table pure-table-horizontal">
<thead>
// Table heading content
</thead>
<tbody>
// Table body content
</tbody>
</table>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
integrity=
"sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"
crossorigin="anonymous">
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Pure CSS Table with Horizontal Borders</h3>
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Runs</th>
<th>Centuries</th>
<th>Strike Rate</th>
<th>Avg</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rohit</td>
<td>10000</td>
<td>29</td>
<td>97</td>
<td>55</td>
</tr>
<tr>
<td>2</td>
<td>Virat</td>
<td>12000</td>
<td>40</td>
<td>91</td>
<td>49</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>5000</td>
<td>8</td>
<td>85</td>
<td>45</td>
</tr>
<tr>
<td>4</td>
<td>Rishabh</td>
<td>4000</td>
<td>2</td>
<td>89</td>
<td>39</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
|
Output:
Pure CSS Table with Horizontal Borders
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...