HTML Tables

It’s very important to learn How to Create an HTML Table. Because the HTML table allows to arrange data ─ text, images, links, forms, form fields, other tables, etc. into rows and columns of cells.

Basic HTML Table

Example Try this Code
<table border="1">
  <tr>
    <th>Table Header</th>
    <th>Table Header</th>
  </tr>
  <tr>
    <td>Table cell 1</td>
    <td>Table cell 2</td>
  </tr>
  <tr>
    <td>Table cell 3</td>
    <td>Table cell 4</td>
  </tr>
</table>

Description:

  • <table>: An HTML table is created using the <table> tag.
  • <tr>: Each table row is defined with the <tr> tag
  • <th>: The <th> tags define the table header cells. By default, table headings are bold and centered.
  • <td>: A table data/cell is defined with the <td> tag. The <td> elements are the data containers of the table.
  • border: Here border is an attribute of the <table> tag. To put border around the cells, use border="1".

Spanning Many Columns

To span more than one column in HTML Tables, use colspan attribute.

Example Try this Code
<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Spanning Many Rows

To span more than one row in HTML Tables, use rowspan attribute.

Example Try this Code
<table border="1">
  <tr>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr>
    <td rowspan="2">Steve Jobs</td>
    <td>55585645</td>
  </tr>
  <tr>
    <td>55596542</td>
  </tr>
</table>

Styling HTML Tables Using CSS

There are some attributes of the <table> tag such as ─ “align”, “bgcolor”, “cellpadding”, “cellspacing”, “frame”, “rules”, “summary” and “width” are not supported in HTML5. So we will use CSS instead.

First, I will describe the CSS codes here and then will provide the full CSS and HTML code together below.

CSS Code Example of HTML Tables

table {
  width: 100%;
  border-collapse: collapse;
}
td, th {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
}

Description:

  • width: The CSS width property is used to specify the width of a table.
  • border: If you do not specify a border for the table, it will not be displayed. So use the CSS border property to set a border.
  • border-collapse: After using border for the table, you will see double borders around the cells. But if you want the borders to collapse into a single border then add CSS border-collapse property.
  • padding: The CSS padding property is used to specify the space between the cell content and its borders instead of cellpadding attribute.
  • text-align: The CSS text-align property is used to align left, specially for the table headings.

HTML Code Example of a Table

To see the full HTML and CSS code, click on the “Try this Code” button.

Example Try this Code
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Barack</td>
    <td>Obama</td>
    <td>54</td>
  </tr>
  <tr>
    <td>Angela</td>
    <td>Merkel</td>
    <td>61</td>
  </tr>
  <tr>
    <td>Vladimir</td>
    <td>Putin</td>
    <td>63</td>
  </tr>
  <tr>
    <td>Bill</td>
    <td>Gates</td>
    <td>60</td>
  </tr>
</table>

Grouping HTML Tables

The <thead>, <tbody> and <tfoot> elements are used to specify each part of a table (header, body, footer).

The <tfoot> tag must be used as a child of a <table> element, after any <caption>, <colgroup> and <thead> elements, and before any <tbody> and <tr> elements.

Example Try this Code
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Balance</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$150</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>

A Simple HTML Table with CSS Styles

Click on the “Demo” button to download and see it live.