Table Help: Codes & Examples





Page-Jump Menu For This Tutorial:

Read This Please


TABLE (General Overview)
ALIGN
BGCOLOR (TABLE)
BGCOLOR (TD)
BORDER
CAPTION
HEADER
CELLPADDING
CELLSPACING
COLSPAN
ROWSPAN
VALIGN
WIDTH



TABLE

The Code How It Looks
<TABLE>
  <TR>
    <TD>Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD>Data 4</TD>
  </TR>
</TABLE>


Data 1 Data 2
Data 3 Data 4



<TR> = Row
<TD> = Data Cell (Column)

Back To Menu


TD ALIGN

The Code
<TABLE>
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
    <TH>Header 3</TH>
  </TR>
  <TR>
    <TD ALIGN="LEFT">Data 1</TD>
    <TD ALIGN="CENTER">Data 2</TD>
    <TD ALIGN="RIGHT">Data 3</TD>
  </TR>
</TABLE>
How It Looks

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3


Back To Menu

TABLE BGCOLOR

The Code How It Looks
<TABLE BGCOLOR="#00FFFF">
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD>Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD>Data 4</TD>
  </TR>
</TABLE>
BGCOLOR="#00FFFF"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
BGCOLOR="aqua"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back To Menu

TD BGCOLOR

The Code
<TABLE BGCOLOR="#99CCCC">
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD BGCOLOR="#00FFFF">Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD BGCOLOR="aqua">Data 4</TD>
  </TR>
</TABLE>
How It Looks

Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back To Menu

TABLE BORDER

The Code How It Looks
<TABLE BORDER="2">
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD>Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD>Data 4</TD>
  </TR>
</TABLE>
BORDER="2"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
BORDER="0"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back To Menu

<TABLE><CAPTION><HEADE R>

The Code
<TABLE BORDER="2">
<CAPTION>This is a 
caption</CAPTION>
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD>Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD>Data 4</TD>
  </TR>
</TABLE>
How It Looks
This is a caption
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back To Menu

TABLE CELLPADDING

The Code How It Looks
<TABLE CELLPADDING="0">
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD>Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD>Data 4</TD>
  </TR>
</TABLE>
CELLPADDING="0"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
CELLPADDING="7"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back To Menu

TABLE CELLSPACING

The Code How It Looks
<TABLE CELLSPACING="0">
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD>Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD>Data 4</TD>
  </TR>
</TABLE>
CELLSPACING="0"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
CELLSPACING="7"
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back To Menu

TD COLSPAN

The Code
<TABLE>
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD COLSPAN="2">Data 1</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD>Data 4</TD>
  </TR>
</TABLE>
How It Looks

Header 1 Header 2
Data 1
Data 3 Data 4


Back To Menu

TD ROWSPAN

The Code
<TABLE>
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD ROWSPAN="2">Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 4</TD>
  </TR>
</TABLE>
How It Looks

Header 1 Header 2
Data 1 Data 2
Data 4


Back To Menu

TD VALIGN

The Code
<TABLE>
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
    <TH>Header 3</TH>
  </TR>
  <TR>
    <TD VALIGN="TOP">Data 1</TD>
    <TD VALIGN="MIDDLE">Data 2</TD>
    <TD VALIGN="BOTTOM">Data 3</TD>
  </TR>
</TABLE>
How It Looks

Header 1 Header 2 Header 3
Data 1 Data 2 Data 3


Back To Menu

TABLE WIDTH

The Code How It Looks
<TABLE WIDTH="75%">
  <TR>
    <TH>Header 1</TH>
    <TH>Header 2</TH>
  </TR>
  <TR>
    <TD>Data 1</TD>
    <TD>Data 2</TD>
  </TR>
  <TR>
    <TD>Data 3</TD>
    <TD>Data 4</TD>
  </TR>
</TABLE>
WIDTH="75%" (percent)
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4
WIDTH="125" (pixels)
Header 1 Header 2
Data 1 Data 2
Data 3 Data 4


Back To Menu