HTML Code For Tables

Tables in HTML serve multiple purposes. You can go from creating a simple 2 column table to developing your whole site layout with tables. This section of the tutorial will teach you how to use the HTML code for tables.

Basic table tags

At first, you will need to learn only 3 different html table tags:

  • <table>
    The table tag will be used to open the table. The very tag will be </table> to close it.
  • <tr>
    Right after the table tag, tr is used to open your first row. After inserting cells (see below), you will close your row with </tr>
  • <td>
    The td tags will be inserted between the opening and closing tr tags. The content of your table will be inserted between the <td> and </td> tags. You can insert multiple cells in a single row (tr tag).

HTML table example

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 cell 2

The previous example is a simple table with 2 rows each containing 2 cells. I also centered it on the screen and added a border so you see the concept of the table a little bit better. Here's the HTML code for the above table:

<html>
<head>
<title>html code for tables</title>
</head>
<body>
<table border="1" align="center">
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
</body>
</html>

HTML Table Align

There are three ways you can align a table on screen:

  • Align Left
  • Align Center
  • Align Right

You will need to add the align attribute to the opening <table> tag. If you want to center your table, the html code for your opening table tag would be: <table align="center">. You can replace center with "left" or "right".

Wrapping text arround table

You don't need to add anything to the HTML code for tables for text to wrap arround it.Any left or right aligned table will automatically have the content coming after it wrap to its side. For example, a table aligned to the left will have the content flow to its right and vice-versa. If you don't want any content to flow around the table, insert a <br> after your </table> tag.

Aligning content in cell

If you want to align the content of only one cell (<td>), add align="Direction" to the tag. For example, if you want to align the content of a given cell to the right, the opening cell tag would look like this: <td align="right">

Adding a border to a table

To add a border to your html table, you will need to add border="size" to the opening <table> tag where size is a number from 1 to infinity where 1 is the smallest. If you want a border of "2", your opening table tag would be: <table border="2">.

Setting table and cell width

If you want to create anything layout related with html tables, you need to set width values to your cells. You can set the width 2 ways:

  • Width %
  • Width in pixels

Beware that if you set a width in % for your cell, make sure to set a width size on your table or it will stretch to fill all the available space. If that's what you want, ignore this paragraph. To set the width of the whole table, add width="size" to the <table> tag where size is either a % of available space or a pixel value.

Using colspan

Here's a HTML table example using 2 rows. The first one will have 1 cell while the second one will contain 2 cells:

Row 1 cell 1
Row 2 cell 1 Row 2 cell 2

Here's the HTML code for colspan cells:

<html>
<head>
<title>html code for tables</title>
</head>
<body>
<table align="center" width="250" border="1">
<tr>
<td width="250" colspan="2">Row 1 Cell 1</td>
</tr>
<td width="125">Row 2 Cell 1</td>
<td width="125">Row 2 Cell 2</td>
</tr>
</table>
</body>
</html>

The "row 1 cell 1" cell spans across two other cells, you need to add colspan="2" to the <td> tag or the cell will be the same size as other cells under it. You can span across more than 2 cells. Replace "2" with any number you wish.

Using rowspan

The next table does the same thing but will have a row that spans across another row:

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1

Here's the HTML code for rowspan cells:

<html>
<head>
<title>html code for tables</title>
</head>
<body>
<table align="center" width="250" border="1">
<tr>
<td width="125" rowspan="2">Row 1 Cell 1</td>
<td width="125">Row 1 Cell 2</td>
</tr>
<td width="125">Row 2 Cell 1</td>
</tr>
</table>
</body>
</html>

You can have a cell span across as many cells as you want. Just replace the "2" in rowspan to any number you wish.

Designing layouts with tables

Using your imagination, you can create your whole site layout using tables. Use colspan and rowspan to create navigation, headers, etc. Use background images to style each cell of the layout. Don't be afraid to insert whole tables in a different table's cell too. I prefer CSS layouts but many websites still design with tables.


Back
Nested Bullet Lists		Next
Name of the page