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 “pure-table” class to add styles on table. This class adds the padding and borders to table elements, and emphasizes the header.
Bordered Table is a table that has horizontal and vertical border to the cell. To make the bordered table, we will add “pure-table-bordered” class.
Pure CSS Bordered Table Class:
- pure-table-bordered: This class is used to created the bordered table. This class is used with pure-table class.
Syntax:
<table class="pure-table pure-table-bordered">
<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 Bordered Table</ h3 >
< table class = "pure-table pure-table-bordered" >
< 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 Bordered Table
Reference: https://purecss.io/tables/#bordered-table
Last Updated :
30 Jan, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...