HTML Tables

HTML Tables: HTML tables allow web developers to arrange data into rows and columns.

The HTML tables allow web authors to arrange data like text, images, links, different tables, and so on into rows and columns of cells.

---

Define an HTML Table

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text <th> elements are bold and focused.

By default, the next in <th> elements are regular and left-aligned.

Example
A simple HTML table:

Basic HTML Table

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	24

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Salman</td>
    <td>khan</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Haroon</td>
    <td>khan</td>
    <td>22</td>
  </tr>
</tr>
  <td>Haroon</td>
    <td>Khan</td>
    <td>24</td>
  </tr>
</table>

Note: The <td> elements are the data containers of the table. They can contain a wide range of HTML elements; text, pictures, lists, different tables, and so on

---

HTML Table – Add a Border

To add a border to a table, use the CSS border property:

Example

Table With Border

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

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	24

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

---

HTML Table – Collapsed Borders

To allow the borders collapse into one border, add the CSS border-collapse property:

Example

Collapsed Borders

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

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	24

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

---

HTML Table – Add Cell Padding

Cell padding indicates the space between the cell substance and its border.

In the event that you don’t indicate a padding, the table cells will be shown without padding.

To set the padding, use the CSS padding property:

Example

Cellpadding

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

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	24

Tip: Try to change the padding to 5px.

th, td {
  padding: 15px;
}

---

HTML Table – Left-align Headings

By default, table headings are bold and focused.

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

Example

Left-align Headings

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

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	24

th {
  text-align: left;
}

---

HTML Table – Add Border Spacing

Border spacing determines the space between the cells.

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

Example

Border Spacing

Border spacing specifies the space between the cells.

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	22

Tip: Try to change the border-spacing to 5px.

table {
  border-spacing: 5px;
}

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

---

HTML Table – Cell that Spans Many Columns

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

Example

Cell that spans two columns

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

Name	Telephone
Salman Khan	********	********

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Salman Khan</td>
    <td>********</td>
    <td>********</td>
  </tr>
</table>

---

HTML Table – Cell that Spans Many Rows

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

Example

Cell that spans two rows

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

Name:	Salman Khan
Telephone:	********
	********

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Sohail</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>********</td>
  </tr>
  <tr>
    <td>********</td>
  </tr>
</table>

---

HTML Table – Add a Caption

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

Example

Table Caption

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

Monthly savings

Month	Savings
January	$100
February	$50

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

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

---

A Special Style for One Table

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

Example

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Sohail</td>
    <td>Khan</td>
    <td>25</td>
  </tr>
</table>

Now you can define a special style for this table:

Styling Tables

Firstname	Lastname	Age
Salman Khan	Khan	22
Sohail	Khan	22
Haroon	Khan	24

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	24

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

And add more styles:

Styling Tables

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	24

Firstname	Lastname	Age
Salman	Khan	22
Sohail	Khan	22
Haroon	Khan	24

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

---

Chapter Summary

• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table

---

HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

HTML Basics