CSS Tables

 The look of an HTML table can be greatly improved with CSS:
CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Berglunds snabbköpChristina BerglundSweden
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Königlich EssenPhilip CramerGermany
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Table Borders

To specify table borders in CSS, use the property of border. The example below specifies a black border for <table>, <th>, and <td> elements:

FirstnameLastname
PeterGriffin
LoisGriffin

 

Example

table, th, td {
border: 1px solid black;
}

Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border:

Example

table {
border-collapse: collapse;
}table, th, td {
border: 1px solid black;
}
If you only want a border around the table, only specify the border property for <table>:

 

Example

table {
border: 1px solid black;
}

Table Width and Height

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 50px:

Example

table {
width: 100%;
}tthe{
height: 50px;
}