1. Computing

Discuss in my forum

How do you build an HTML table from scratch?

By

Question: How do you build an HTML table from scratch?

HTML tables can be very tricky to build in a text editor, but once you learn how to build them you'll be glad you did. Knowing how to build HTML tables from scratch is a good indication that you're an intermediate or advanced HTML author.

Answer:

HTML tables require only three tags to build:

  • TABLE
    This is the outermost tag in a table. All table tags are contained inside the <table> start tag and </table> end tag.
  • TR
    HTML tables are made up of rows and columns. The TR element defines a table row. Every time a <tr> tag appears, a new table row is defined.
  • TD
    Finally there are the table cells (or table data). The <td> tag defines the beginning of a new column in the table. This is where you write the contents of the table cells.

The best way to start is to think about tables as being a group of cells in a row, and a group of rows in a table. If you visualize your content displayed in a spreadsheet, each cell of the spreadsheet is a TD element, each row is a TR with multiple TD elements, and the entire table is the TABLE element with multiple TR elements inside.

First create the table:

<table>
</table>

Be sure to include both the start tag <table> and end tag </table> so that your HTML is valid and it works in all browsers.

Within that TABLE element, create your first table row using the TR element:

<table>
  <tr>
</table>

HTML5 and HTML 4.01 do not require a closing </tr> tag in most situations, but you can include it if you like. If you are going to write XHTML, then you must include the closing tag.

Then create the cells in that table row using the TD element. In my example, I'll add three table cells:

<table>
  <tr>
    <td>
    <td>
    <td>
</table>

Just like the TR element, HTML5 and HTML 4.01 do not require a closing </td> tag, but you should include it if you are writing XHTML.

The last thing you do is include your content within the cells.

<table>
  <tr>
    <td>column 1
    <td>column 2
    <td>column 3
</table>

To expand your table, add more rows. Be sure to include the same number of columns in each row that you add.

Here is an example of a simple one row table.

More Advanced Tables

There are also a few other elements (and two attributes) that can be useful in building HTML tables:

  • TH
    This element creates table header cells. Use it the same way you use TD elements, only for header cells.
  • THEAD
    This element defines the rows of the table that are part of the head of the table.
  • TFOOT
    This element defines the rows of the table that are part of the foot of the table.
  • TBODY
    This element defines the rows of the table that are part of the body of the table.
  • The colspan attribute

The first type of row you should add is a row of header cells with the TH element. You add headers the same way you add table cells.

<table>
  <tr>
    <th>header 1
    <th>header 2
    <th>header 3
  <tr>
    <td>column 1
    <td>column 2
    <td>column 3
</table>

Just like the TD element, the closing </th> tag is not required unless you are writing XHTML.

You can see an example of the same simple table with a header row.

If you want to make the first column your headers, you need to make the first cell in every row a TH element. There is no easier way to do this. Here is an example of first column headers.

The THEAD, TFOOT, and TBODY define areas of the table as the head, foot, and body. They are mostly used with CSS to style specific areas. But most browsers will automatically put the rows in the THEAD at the top of the table, and the rows in the TFOOT at the bottom.

<table>
  <thead>
    <tr>
      <th>Col 1 Header</th>
      <th>Col 2 Header</th>
      <th>Col 3 Header</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Col 1 Footer</td>
      <td>Col 2 Footer</td>
      <td>Col 3 Footer</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Column 1</td>
      <td>Column 2</td>
      <td>Column 3</td>
    </tr>
    <tr>
      <td>Row 2:1</td>
      <td>2:2</td>
      <td>2:3</td>
    </tr>
</table>

Here is an example of a table with THEAD, TFOOT, and TBODY. Note that the TFOOT is the second written row, but is displayed at the bottom of the table.

The last two things you should know about when building a table are the colspan and rowspan attributes. These allow you to create cells that are larger than one column or row. The value of these attributes is the number of columns or rows you want the current cell to span.

If you want a cell to span two columns, you write colspan="2". You then remove one of the original columns in that row. For example, to change a three column row to have one cell spanning two columns you change this row:

<tr>
  <td>Column 1</td>
  <td>Column 2</td>
  <td>Column 3</td>
</tr>

To look like this row:

<tr>
  <td colspan="2">Column 1</td>
  <td>Column 3</td>
</tr>

Here is an example of a table with a colspan on a cell.

You use the rowspan attribute in the same way. Only instead of replacing cells in the same row, you need to remove cells below the row with the rowspan element. For example:

<tr>
  <td rowspan="2">Column 1</td>
  <td>Column 2</td>
  <td>Column 3</td>
</tr>
<tr>
  <td>2:2</td>
  <td>2:3</td>
</tr>

And here is an example of a table with the rowspan attribute.

Related Video
Create Tables in HTML
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Tables
  7. How do you build an HTML table from scratch - Build HTML tables

©2014 About.com. All rights reserved.