Path // www.yourhtmlsource.comTables → BASIC TABLES

Basic Tables


When beginners hear the term “table” being used, they usually dream up the image of something like this:

The best things ever — fact.
Best filmsMonsters, Inc.Toy Story 2The Lion King
Best musicDovesElliott SmithDaft Punk
Best comicsCalvin and HobbesThe Far SidePenny Arcade

In reality, tables are far more abundantly used than simply to show data in formats like that. Tables used to be the most flexible layout systems available to web-designers, until we were gifted with the expanded possibilities of CSS layout. Even though most working designers have moved on from using tables for layout, they are still exactly what you need when you need to lay out a data set to be easily understood, and knowing how to write a clean, intelligible table is a vital skill.

Clock This page was last updated on 2012-08-21



Basic Table Code

Tables are made up of many parts, all inside one another, which is where much of the complications come from. Thankfully, there is a very rigid and logical system for writing tables.

<table border="1">
  <tr>
    <td>cell 1</td><td>cell 2</td>
  </tr>
  <tr>
    <td>cell 3</td><td>cell 4</td>
  </tr>
</table>

The code above would create this:

cell 1cell 2
cell 3cell 4

Even though that’s about as basic as a table can be, that might still look more complicated than you’re used to. Allow me to explain:

  • <table> holds all the other table-related elements inside of it. It has a border attribute, which can be set to a number. This defines how wide the table’s border is — set it to zero for no border.
  • <tr> starts a new Table Row. Rows are ended with a closing </tr>.
  • <td> means Table Data, but we will always call them “table cells”. Each box you see in the resulting HTML page is a cell. tds are closed similarly with a </td>.
  • </table> ends the table.

Cells resize themselves if the text you put into the tds is too big, and each row in a table must contain the same amount of cells, unless you use special attributes (dealt with later). You cannot put anything in a table that is not within a td and a /td — i.e. you can't start writing after an opening tr tag, you must open the td first.

Be careful that you close all your elements. Since the tds are contained in the trs, and they are contained in the <table>, if you forget any end tags, your whole table might be messed up (especially in the more recent browsers who are clamping down on this).

Table Attributes

You’ve already seen me make use of the border attribute of tables. I’ll go through that and the rest now.

  • border can be set to any value, for bigger borders around your tables and between your cells. Note that most tables have their border set to 0 — i.e. invisible, with background colours used to define the edges of the cells.
  • align just like most elements, whole tables can be aligned to the center, left or right.
  • width is used to specify how wide the table is, either in pixels or in a percentage of the screen width. For example, you could specify width="400" or width="80%".

Spacing your tables out

These two table-specific attributes affect how much space is left both between table cells, and between the table border and its contents. Together they can make a big difference to how easily your tabulations can be read.

cellpadding is the space around anything in the td. For instance, in the first of these tables, cellpadding is set to 0, and in the second it is 5.

cell content
cell content

You can see in the first one that the content is right up against the border, while in the other one it has been padded out from the edge. This is generally much better for readability, so give your text some breathing space.

cellspacing is the space between cells. The border between them is split. You’ll understand this much better with an example. Again, it’s 0 and 5.

cellcell
cellcell
cellcell
cellcell

The default (value it is set to if you make no change) for both of these attributes is 2.

Cell Alignment

Not only can you align the entire table to either side or to the middle, you can also align the text, or images, or whatever, inside a cell to either side, middle, or to the top or bottom. For instance:

center right

You simply put the align attribute in the td element (or in the tr if you want to affect the whole row). Like <td align="right">.

valign means Vertical Align. In the first cell below the valign is set to bottom and in the second valign="top".

bottomtopmiddle

left is the default for align and middle for valign.

Table and Cell Width

You can add the width="x" attribute into either your table element or into individual cells. If you put it into the table element, you’ll be specifying how wide the table is on the screen, in pixels or as a percentage of the screen. Try to keep the widths under 750 pixels at most, so that it fits into the width of most people’s monitors. If you’re setting it as a percentage, don’t forget the % mark.

Usually cells resize themselves depending on what you’ve put into them, but you can directly specify how wide you want them by putting the width attribute in. This way you’re specifying their width in pixels as before, or their percentage of the table that they’re in. Once you’ve set one, the others will sort the remaining space out themselves.

Remember, anything can go inside a table cell. Images, text: the lot. You could put all your content in a table and use it to align things up or lay out charts and graphs. See what you can come up with.

sourcetip: In certain old browsers, when you add text into a table cell, the text’s font always goes back to the default size, face and colour. Just write a simple stylesheet and define fonts for your tables to solve this problem.

The next tutorial contains some more advanced ninja techniques for laying out complex tables.