Pure CSS Table with Horizontal Borders
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
Please Login to comment...