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,

    <TABLE>
   <TR>
      <TD>
      </TD>
   </TR>
</TABLE>
    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:
    <TABLE ALIGN="LEFT|CENTER|RIGHT">
    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 :
    <TD VALIGN="TOP|MIDDLE|BOTTOM">

  • 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%">
    or
    <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.
    <TABLE CELLSPACING="?">

  • Cellpadding, gives the space between the text in the cell and the cellborder.
    <TABLE CELLPADDING="?">

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

    • You can also add a align tag here.
      <CAPTION ALIGN="TOP|BOTTOM">
      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 :
    <TD NOWRAP>
    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.

 

TOP

Latest script:

 

Books: