HTML Lesson 5

Tables

Like all HTML coding, table coding is done by pairs of tags. The table itself is defined with TABLE tags, each row is identified by Table Row (TR) tags, and each cell is specified by a Table Data (TD) tag. Therefore, a simple table with two rows and three columns would look like this:

  <TABLE ALIGN="center" BORDER="2" CELLSPACING="0" CELLPADDING="4" WIDTH="80%">
     <TR>
        <TD>Row 1, Column 1</TD>
        <TD>Row 1, Column 2</TD>
        <TD>Row 1, Column 3</TD>
     </TR>
     <TR>
        <TD>Row 2, Column 1</TD>
        <TD>Row 2, Column 2</TD>
        <TD>Row 2, Column 3</TD>
     </TR>
  </TABLE>

The attributes associated with the TABLE tag are the alignment of the table on the page, the thickness of the borders (BORDER=0) implies no border, extra spacing between cells, padding between the border and the data in the cell, and the WIDTH of the table either in pixels or as a percentage of the page width. In the example above we have a border, a width of 80% of the page, and 4 pixels of cell padding. You may not need CELLPADDING if you don't have borders. To get a better feel for how this works, view table shown above, save it on your computer, start changing the various attributes and viewing the result in your favorite browser.

Next take your same table and add horizontal (ALIGN) and vertical (VALIGN) alignment attributes to a couple of the TD tags. ALIGN, the horizontal alignment attribute, accepts values of "right", "left", "center", and "justify". VALIGN, the vertical alignment attribute, supports "top", "bottom", "middle", and "basealign". I recommend you keep a border, but set both CELLSPACING and CELLPADDING to 0 when first trying the TD alignment attributes -- it will better allow you to see how they work. (Note that alignment becomes more critical as you start to add graphics in the table cells.) Note that you can also specify the ALIGN and VALIGN attributes with the TR tag and they apply unless overridden by the same attribute in an individual TD cell. Here's another table with more cells you can also save on your machine and play with.

More complex tables combine multiple columns in a single row (or rows in a column) to make headers, etc. Take that same table with more rows and columns and then practice combining the cells by using the COLSPAN or ROWSPAN attributes with the TD tags. Here's a start: table with row and column spans (save it on your computer and review the results of changing various attributes.)

As we start to look at various Web Pages around the internet, we see that tables provide a very powerful tool for formatting web pages. Review the coding of the Dance-Addiction page you saw in lesson 3 -- the entire page is really a single table with just ONE row and THREE columns. The first column is 150 pixels wide and holds the buttons (for now ignore the SCRIPT in the HEAD section and the seemingly complex button coding which controls all the changes as you move your cursor over the buttons.) The second column is 10 pixels wide, but is empty, it's just there for spacing. The third column is a single cell which holds all the text. This same technique is used in all the pages on that web site. This technique allowed us to put a stripe down the left side, keep the buttons a constant width, but allowed the rest of the text on the page to fit the remaining display width.


Copyright 2001 by Wren McMains

Cherryfield.net Resources

Go back to Lesson 4

Next we'll review the coding of your pages.
Review some of them -- be prepared to ask questions
about ones you couldn't code yourself.

Back to the HTML Basics Index