HTML Table

HTML Table Example:

Firstname	Lastname	Points
Jill	Smith	50
Eve	Jackson	94
John	Doe	80
Adam	Johnson	67

---

HTML Tables

Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table data)
A row can also be divided into headings with the <th> tag. (th stands for table heading)
The <td> elements are the data containers in the table.
The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.
The width of a table can be defined using CSS.

Example

<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »

---

An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:

Example

<table border="1" style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »

	However, the border attribute is on its way out of the HTML standard! It is better to use CSS.

To add borders with CSS, use the border property:

Example

<style>
table,th,td
{
border:1px solid black;
}
</style>

Try it yourself »

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

---

An HTML Table with Collapsed Borders

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

Example

<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>

Try it yourself »

---

An HTML Table with 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:

Example

th,td
{
padding:15px;
}

Try it yourself »

---

HTML Table Headings

Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:

Example

<table style="width:300px">
<tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »

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

Example

th
{
text-align:left;
}

Try it yourself »

---

An HTML Table with Cell Spacing

Cell spacing specifies the space between the cells.
To set the cell spacing for the table, use the CSS border-spacing property:

Example

table
{
border-spacing:5px;
}

Try it yourself »

---

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