HTML

Tables

Tables Basics

Tables are constructed of rows, columns, and cells. A row may span several columns. A cell can span more than one row or column.

Here is a simple 3 x 2 table. It begins with a <TABLE> tag, which can be used to specify such attributes as the borders, alignment and width of the table. Each row is preceded by <TR> and followed by </TR>. Within each row, each cell begins with a table data entry tag, <TD> and ends with </TD>. The table ends with </TABLE>.



<TABLE BORDER ALIGN = CENTER>

  <TR> 

    <TD>row 1, col. 1</TD>

    <TD>row 1, col. 2</TD>

    <TD>row 1, col. 3</TD>

  </TR>

  <TR> 

    <TD>row 2, col. 1</TD>

    <TD>row 2, col. 2</TD>

    <TD>row 2, col. 3</TD>

  </TR>

</TABLE>

row 1, col. 1	row 1, col. 2	row 1, col. 3
row 2, col. 1	row 2, col. 2	row 2, col. 3

If you want to make a cell stretch across more than one column, use <TD COLSPAN=n>, where n is the number of columns. Similarly, use <TD ROWSPAN=n> to make a cell stretch down more than one row, as shown in the example below.


<TABLE BORDER ALIGN = CENTER>

  		<TR>

      <TD ROWSPAN=3> 1</TD>

      <TD> 2</TD>

      <TD ROWSPAN=2> 3</TD>

      <TD> 4</TD><TD> 5</TD> 

      <TD COLSPAN = 3 ROWSPAN=2> 6</TD>

  		</TR>

  		<TR>

      <TD> 7</TD> <TD> 8</TD> <TD ROWSPAN=2> 9</TD>

  		</TR>

  		<TR>

      <TD> 10</TD> <TD COLSPAN=2> 11</TD><TD> 12</TD><TD> 13</TD><TD> 14</TD> 

  		</TR>

</TABLE>

1	2	3	4	5	6
	7		8	9
	10	11			12	13	14

Don't use large tables, as the information will not display until the end table tag is reached.

Tables can look different in Netscape and Internet Explorer, so check your tables in as many browsers and versions as you can. Use an HTML checker such as BBEdit or Doctor HTML too.

Recent browsers understand tables, and ignore <BR> and <P> tags. Old browsers ignore tables, so add <BR> and <P> tags at the end of each cell, and use other standard HTML tags to make sure that old browsers show the information with some kind of formatting. Internet Explorer used to ignore line break tags in tables.

Adding headers, cellpadding and cellspacing, and nesting tables

Alignment, width, height

Arranging Information and Images

Organising Forms