Table Basics

By: Jool
Learn how to create tables in HTML to hold your information or help in layouts


1. Tables?
Tables are commonly used to display information, or sometimes in html layouts too. They are quite simple to code too.

2. Coding tables
So you want to make a table, first you'll need the <table> and </table> tags. Next, to create a row you'll want some <tr> and </tr> tags. Finally, for columns you'll need <td> and </td> tags. Below is an example of a 2 row, 3 column table. Once you see the code below, it will be easy to visualize how to make other tables, etc.

<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 2;</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>

3. Expanding your tables
You can add extra attributes to your <table> tags, such as

width="100%" border="0" cellspacing="0" cellpadding="0"

Width will set the width of the table, this can be in pixels or percentage form. You can set the border width in pixels as well. You can also set cell spacing and padding while you at it.
In the <td> tags you can set attributes such as align="left", to tell the page where to align the cell. You can also set style="", for use in CSS, etc.

Please remember, tables are designed for use to display tabular data, that means attempting to make a layout with tables could become complicated seeing as they were never designed for such a task.