If you are interested to learn about the CSS List
CSS Tables
A table in CSS is used to apply the various styling properties to the HTML Table elements to arrange the data in rows and columns, or possibly in a more complex structure in a properly organized manner. Tables are widely used in communication, research, and data analysis. The table-layout property in CSS can be utilized to display the layout of the table.
The look of an HTML table can be greatly improved with CSS:
Company | Contact | Country |
---|---|---|
Alfreds Futterkiste | Maria Anders | Germany |
Berglunds snabbköp | Christina Berglund | Sweden |
Centro comercial Moctezuma | Francisco Chang | Mexico |
Ernst Handel | Roland Mendel | Austria |
Island Trading | Helen Bennett | UK |
Königlich Essen | Philip Cramer | Germany |
Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Table Borders
To specify table borders in CSS, use the border
property. The example below specifies a solid border for <table>, <th>, and <td> elements:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
Example
table, th, td { border: 1px solid; }
Full-Width Table
The table above might seem small in some cases. If you need a table that should span the entire screen (full-width), add width: 100%
to the <table> element:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
Example
table { width: 100%; }
Double Borders
Notice that the table in the examples above have double borders. This is because both the table and the <th> and <td> elements have separate borders.
To remove double borders, take a look at the example below.
Collapse Table Borders
The border-collapse
property sets whether the table borders should be collapsed into a single border:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
Example
table { border-collapse: collapse; }
If you only want a border around the table, only specify the border
property for <table>:
Firstname | Lastname |
---|---|
Peter | Griffin |
Lois | Griffin |
Example
table { border: 1px solid; }
CSS Table Size
Table Width and Height
The width and height of a table are defined by the width
and height
properties.
The example below sets the width of the table to 100%, and the height of the <th> elements to 70px:
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Example
table { width: 100%; } th { height: 70px; }
To create a table that should only span half the page, use width: 50%
:
Firstname | Lastname | Savings |
---|---|---|
Peter | Griffin | $100 |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Example
table { width: 50%; }