CSS Tables

[Guest]

CSS Tables


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



Try it Yourself »

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;
}

Try it Yourself »








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%;
}

Try it Yourself »


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;
}
Try it Yourself »

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;
}
Try it Yourself »













★
+1

Reference: https://www.w3schools.com/css/css_table.asp