HTML Tables

HTML Tables

 
 

<!DOCTYPE html>

<html>

<head>

<style>

table {

  font-family: arial, sans-serif;

  border-collapse: collapse;

  width: 100%;

}

 

td, th {

  border: 1px solid #dddddd;

  text-align: left;

  padding: 8px;

}

 

tr:nth-child(even) {

  background-color: #dddddd;

}

</style>

</head>

<body>

 

<h2>HTML Table</h2>

 

<table>

  <tr>

    <th>Company</th>

    <th>Contact</th>

    <th>Country</th>

  </tr>

  <tr>

    <td>Alfreds Futterkiste</td>

    <td>Maria Anders</td>

    <td>Germany</td>

  </tr>

  <tr>

    <td>Centro comercial Moctezuma</td>

    <td>Francisco Chang</td>

    <td>Mexico</td>

  </tr>

  <tr>

    <td>Ernst Handel</td>

    <td>Roland Mendel</td>

    <td>Austria</td>

  </tr>

  <tr>

    <td>Island Trading</td>

    <td>Helen Bennett</td>

    <td>UK</td>

  </tr>

  <tr>

    <td>Laughing Bacchus Winecellars</td>

    <td>Yoshi Tannamuri</td>

    <td>Canada</td>

  </tr>

  <tr>

    <td>Magazzini Alimentari Riuniti</td>

    <td>Giovanni Rovelli</td>

    <td>Italy</td>

  </tr>

</table>

 

</body>

</html>

 

HTML Table

CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>

 

<h2>Bordered Table</h2>

<p>Use the CSS border property to add a border to the table.</p>

 

<table style=”width:100%”>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

</body>

</html>

 

Bordered Table

Use the CSS border property to add a border to the table.

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

 

HTML Table – Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

A border is set using the CSS border property:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

}

</style>

</head>

<body>

 

<h2>Bordered Table</h2>

<p>Use the CSS border property to add a border to the table.</p>

 

<table style=”width:100%”>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

</body>

</html>

 

Bordered Table

Use the CSS border property to add a border to the table.

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80

Remember to define borders for both the table and the table cells.

HTML Table – Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

</style>

</head>

<body>

 

<h2>Collapsed Borders</h2>

<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>

 

<table style=”width:100%”>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

</body>

</html>

 

Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80

HTML Table – Adding Cell Padding

Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 15px;

}

</style>

</head>

<body>

 

<h2>Cellpadding</h2>

<p>Cell padding specifies the space between the cell content and its borders.</p>

 

<table style=”width:100%”>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

<p>Try to change the padding to 5px.</p>

 

</body>

</html>

 

Cellpadding

Cell padding specifies the space between the cell content and its borders.

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80

Try to change the padding to 5px.

HTML Table – Left-align Headings

By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 5px;

}

th {

  text-align: left;

}

</style>

</head>

<body>

 

<h2>Left-align Headings</h2>

<p>To left-align the table headings, use the CSS text-align property.</p>

 

<table style=”width:100%”>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

</body>

</html>

 

Left-align Headings

To left-align the table headings, use the CSS text-align property.

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80

HTML Table – Adding Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  padding: 5px;

}

table {

  border-spacing: 15px;

}

</style>

</head>

<body>

 

<h2>Border Spacing</h2>

<p>Border spacing specifies the space between the cells.</p>

 

<table style=”width:100%”>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

 

<p>Try to change the border-spacing to 5px.</p>

 

</body>

</html>

 

Border Spacing

Border spacing specifies the space between the cells.

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80

Try to change the border-spacing to 5px.

Note: If the table has collapsed borders, border-spacing has no effect.

 

HTML Table – Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 5px;

  text-align: left;    

}

</style>

</head>

<body>

 

<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>

 

<table style=”width:100%”>

  <tr>

    <th>Name</th>

    <th colspan=”2″>Telephone</th>

  </tr>

  <tr>

    <td>Bill Gates</td>

    <td>55577854</td>

    <td>55577855</td>

  </tr>

</table>

 

</body>

</html>

 

Cell that spans two columns

To make a cell span more than one column, use the colspan attribute.

NameTelephone
Bill Gates5557785455577855

HTML Table – Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 5px;

  text-align: left;    

}

</style>

</head>

<body>

 

<h2>Cell that spans two rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>

 

<table style=”width:100%”>

  <tr>

    <th>Name:</th>

    <td>Bill Gates</td>

  </tr>

  <tr>

    <th rowspan=”2″>Telephone:</th>

    <td>55577854</td>

  </tr>

  <tr>

    <td>55577855</td>

  </tr>

</table>

 

</body>

</html>

 

Cell that spans two rows

To make a cell span more than one row, use the rowspan attribute.

Name:Bill Gates
Telephone:55577854
55577855

HTML Table – Adding a Caption

To add a caption to a table, use the <caption> tag:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 5px;

  text-align: left;

}

</style>

</head>

<body>

 

<h2>Table Caption</h2>

<p>To add a caption to a table, use the caption tag.</p>

 

<table style=”width:100%”>

  <caption>Monthly savings</caption>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$50</td>

  </tr>

</table>

 

</body>

</html>

 

Table Caption

To add a caption to a table, use the caption tag.

Monthly savings
MonthSavings
January$100
February$50

Note: The <caption> tag must be inserted immediately after the <table> tag.

 

A Special Style for One Table

To define a special style for a special table, add an id attribute to the table:

<!DOCTYPE html>

<html>

<head>

<style>

table {

  width:100%;

}

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

}

th, td {

  padding: 15px;

  text-align: left;

}

table#t01 tr:nth-child(even) {

  background-color: #eee;

}

table#t01 tr:nth-child(odd) {

 background-color: #fff;

}

table#t01 th {

  background-color: black;

  color: white;

}

</style>

</head>

<body>


<h2>Styling Tables</h2>


<table>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>

<br>


<table id=”t01″>

  <tr>

    <th>Firstname</th>

    <th>Lastname</th> 

    <th>Age</th>

  </tr>

  <tr>

    <td>Jill</td>

    <td>Smith</td>

    <td>50</td>

  </tr>

  <tr>

    <td>Eve</td>

    <td>Jackson</td>

    <td>94</td>

  </tr>

  <tr>

    <td>John</td>

    <td>Doe</td>

    <td>80</td>

  </tr>

</table>


</body>

</html>


Styling Tables

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80


FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80