intro |  html |  css |  design |  scripting |  dhtml |  server 

intro
html
css
design
scripting
dhtml
server



This page covers:
      Brief Table Intro
      Table Basics
      Simple Table Example

Brief Table Intro

Tables are currently the best way to lay out a web page. The generation 4.0 browsers support Cascading Style Sheets which are meant to be used to lay out pages, but there are still a lot of web surfers out there who have not upgraded to the newer browsers so tables are still fundamental in web design.

The power of tables is often not fully appreciated by most people. In my opinion, you can lay out a page virtually however you want if you know how to use tables correctly. Master the basics, and you'll be surprised at what you can do with tables.

Table Basics

The <TABLE> tag starts a table element. The <TR> element starts a table row and the <TD> element starts a table cell within a row. Within each of these elements are a variety of attributes you can assign values to which you'll see below. All table tags must be closed with a matching </> tag. Internet Explorer is forgiving of missing end tags, but Netscape will not render tables correctly if you do not close your tags.

Element

Description

CODE

TABLE

Begins a new table

<TABLE></TABLE>

TR

a new row in a table

<TR></TR>

TD

a table data cell within a row

<TD></TD>

Each table row must have the same number of cells. Later on you'll see how you can use colspan and rowspan to change the number of cells in each row, but for now, let's just make sure we have the same number of TD cells in each TR.

Simple Table Example:

Holiday

Month

Day

Icon

Christmas

December

25

Santa Clause

Halloween

October

31

Witch

CODE:

<TABLE>
  <TR>
    <TD><B>Holiday</B></TD>
    <TD><B>Month</B></TD>
    <TD><B>Day</B></TD>
    <TD><B>Icon</B></TD>
  </TR>
  <TR>
    <TD>Christmas</TD>
    <TD>December</TD>
    <TD>25</TD>
    <TD>Santa Clause</TD>
  </TR>
  <TR>
    <TD>Halloween</TD>
    <TD>October</TD>
    <TD>31</TD>
    <TD>Witch</TD>
  </TR>
</TABLE>



 
hardCoder.com © 1999-2011. all rights reserved. // site created and maintained by kathy ahn