CSS Tables | Table Borders | CSS Table Size

If you are interested to learn about the CSS List

CSS Tables

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:

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 border property. The example below specifies a solid border for <table>, <th>, and <td> elements:

FirstnameLastname
PeterGriffin
LoisGriffin

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:

FirstnameLastname
PeterGriffin
LoisGriffin

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:

FirstnameLastname
PeterGriffin
LoisGriffin

Example

table {
  border-collapse: collapse;
}

If you only want a border around the table, only specify the border property for <table>:

FirstnameLastname
PeterGriffin
LoisGriffin

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:

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Example

table {
  width: 100%;
}

th {
  height: 70px;
}

To create a table that should only span half the page, use width: 50%:

FirstnameLastnameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Example

table {
  width: 50%;
}
CSS Tables | Table Borders | CSS Table Size
Show Buttons
Hide Buttons