Tables: Basics

If you've ever seen a page with pictures and text laid out in nice columns or "grid like", and think you could never do that, you are gravely mistaken. Tables are simple and with them you can create pages that look very professional. One thing you have to remember while making tables, is neatness. If you don't keep your HTML neat, it will be more difficult to catch mistakes or modify your content.

Start your table with the open <table> tag and close </table> tag.

<table>
</table>

Add the tags for the first row <tr> and cell (table data) <td>. Each tag you open must be closed.

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

Now you can add your text to the table.

<table>
  <tr>
    <td>My Text</td>
  </tr>
</table>

The default alignment for a table is left. If you want to position your table in the center or to the right on your page, you need to add align="center" or align="right" to the <table> tag. For this example, we will align the table center.

<table align="center">
  <tr>
    <td>My Text</td>
  </tr>
</table>

Unless you set a width, the table will only be as wide as the text or picture inside it. So lets set a width. If you want the table to be 75% of the screen, you add width="75%" to the <table> tag or if want the table to be a specific width you would add width="400" to the <table> tag. Using a width of 100% will fill the entire screen. It is recommended that you only use percentages for your table width. By using percentages, your page will adjust to the screen resolution that your viewer is using.

<table align="center" width="300">
  <tr>
    <td>My Text</td>
  </tr>
</table>

Next, we will add a border. You can make your border as thick as you would like by increasing the size. We will using a 2 pixel border in this example.

<table align="center" width="300" border="2">
  <tr>
    <td>My Text</td>
  </tr>
</table>

The next 2 <table> attributes are cellspacing="x" and cellpadding="x". The cellspacing="x" is the space BETWEEN the table columns and rows. The cellpadding="x" is the amount of space IN the cells surrounding the text or image that is input into the cell. The default amount of space for cellpadding is 2 pixels. If you want the border to touch your text, you would enter the code as cellpadding="0".

<table align="center" width="300" border="2" cellspacing="0" cellpadding="6">
  <tr>
    <td>My Text</td>
  </tr>
</table>

Next we are going to add a second cell to the first row of the table. We will also add some cellspacing so that the cells have some spacing between them.

<table align="center" width="300" border="2" cellspacing="6" cellpadding="6">
  <tr>
    <td>My Text 1</td>
    <td>My Text 2</td>
  </tr>
</table>

When we added the second column (cell), each cell took 50% of the table width by default. To make each cell a different size, you add the width="x" attribute to each cell. For our example, the first cell will be 20%, and the second cell will be 80%. You can give them a fixed width, but the total should be equal to your table width. If you used a fixed width in your table tag, you can use percentages in your <td> tags. I do not recommend using fixed widths in your <td> tags if you used a percentage in your <table> tag.

<table align="center" width="300" border="2" cellspacing="6" cellpadding="6">
  <tr>
    <td width="20%">My Text 1</td>
    <td width="80%">My Text 2</td>
  </tr>
</table>

To add another row to the table, we add another table row with cells.

<table width="300" align="center" border="2" cellspacing="6" cellpadding="6">
  <tr>
    <td width="20%">My Text 1</td>
    <td width="80%">My Text 2</td>
  </tr>
  <tr>
    <td width="20%">My Text 3</td>
    <td width="80%">My Text 4</td>
  </tr>
</table>

You can make as many rows and columns as you need, just make sure each row starts with <tr> and ends with </tr>, and every cell starts with <td> and ends with </td>.

 TO TOP