Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

HTML Table Basics

Table Code Formatting

Because table cells can contain a large amount of text and images, you should not just enter the table's tags inline into the html code as required. Defining and troubleshooting tables will be much easier if you keep all your table tags to the left margin of your html and format your webpage's code using indents as shown below.

<table>
  <tr>
    <td>
      Cell Contents
    </td>
    <td>
      Cell Contents
    </td>
  </tr>
  <tr>
    <td>
      Cell Contents
    </td>
    <td>
      Cell Contents
    </td>
  </tr>
</table>

Any variation of this format is also good. The point is to keep all your table related tags to the left, the first thing on a line, so that you don't have to search for them in the html code. This will make it much easier to edit or debug your tables.

Adding a Title to a Table

You can add a title to a table by simply placing the title text in a paragraph element directly above the table. However, using that method, the title text may not be the same width as the table. The caption element can be used to provide a title for a table.

<table border="1" width="200">
<caption>
Table Caption or Title
</caption>
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
  <td>Cell 3</td>
</tr><tr>
  <td>Cell 4</td>
  <td>Cell 5</td>
  <td>Cell 6</td>
</tr><tr>
  <td>Cell 7</td>
  <td>Cell 8</td>
  <td>Cell 9</td>
</tr>
</table>

Table Caption or Title
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9

Using the caption element will cause the title text to be the same width as the table. You can use only one caption element, and it must be placed directly after the opening table tag, before the first table row tag.