Home / code / html

Table in HTML.

What can you do with tables ? Well a lot, you can use it for every layout you can imagine.
You can insert pictures in it, banners, lists, form, ... you name it.

  • The basic of the table is the following,

    Like with the lists you do not need to write </TD>, but it is better you do write it.

  • You can align the entire table with 1 tag:
    Note this doesn't NOT align the text in the cells, only the table on the page.

  • If you want to align the text in the cell's you need to add it in the <TD>
    or if you want the entire row to be done <TR>
    It looks like this :
    <TD align="LEFT|CENTER|RIGHT">

  • If you want to align the text in the cell's VERTICAL you need to add the VALIGN-tag in <TR>
    It looks like this :

  • You can also specify the wide and height of the table and each cell.
    You can add it in % and in pixels.
    <TABLE WIDTH="80%">
    <TABLE WIDTH="300">
    You don't need to add the quotes but you better do.

  • You can add the border width.
    <TABLE BORDER="?"> If you don't add it there will be no border.

  • You can also add a border color.
    <TABLE BORDER="1" bordercolor="#??????"> If you don't add it the standard color will be used. (Black on most systems)

  • Cellspacing, gives the space between the cell's in pixel's.

  • Cellpadding, gives the space between the text in the cell and the cellborder.

  • Caption is the tag the can contains the title of the table.
    It isn't used much.

    • You can also add a align tag here.
      standard is TOP.

  • <TH> is basically the same as <TD> but is mostly used on the first row.
    TH stands for Table Heads and TD stand for Table Data.

  • If you don't want that the text in a cell be broken (put on another line because it is to long)
    You can add :
    Watch out this can cause problems if you look at your page in a lower resolution.

  • Now something very special.
    If you want to merge two or more cells you need the following:
    <TD COLSPAN="?"> for horizontally
    <TD ROWSPAN="?"> for vertically
    You have to replace the ?-mark with the number of rows you want to merge.

Here is a example of a table.



Latest script: