HTML tables are coded in the <BODY> section of the Web document. Some authors call this the <BODY> “container”. Tables, out of necessity, are rectangular in shape. There are the same number of columns in each row and you cannot code a table having a shape other than a square or a rectangle. You may make a table cell that goes across one or more columns horizontally. As you study tables you will learn how to do this in Lesson #2 when you read about the COLSPAN attribute of the <TABLE> element. In the same lesson, as you read about the ROWSPAN attribute of the <TABLE> element you will be learning to make a cell that crosses two or more rows. The table shape, will still be rectangular or square even if some cells span across rows or columns. Let’s begin making a table.
The table element in HTML is <TABLE> </TABLE>. Everything within a table is enclosed between these two “tags” which are both required.
<TABLE>
</TABLE><TR> is the table row element which begins each new row. </TR> must end each row. It will be easier for you to edit your tables if you follow a format of indenting the <TR> and the </TR> “tags” inward from <TABLE> and </TABLE> as follows:
<TABLE>
<TR>
</TR>
</TABLE>This indentation format enables you to view your code and clearly see where each table row begins and ends. A row needs one or more others tags (a heading tag or a data cell tag) before you can put something into a table.
A centered heading in a table is made using the table heading <TH> element inside a row. </TH> closes the heading. If a heading for an additional column in the same row is desired, simply use another <TH> element and close with the </TH> for each additional column needed before closing the row with <TR>. The following code illustrates a row with headings in three columns. The default text alignment for the table heading element is centered text and by default, the text is bold.
<TABLE>
<TR>
<TH>Heading 1</TH>
<TH>Heading 2</TH>
<TH>Heading 3</TH>
</TR>
</TABLE><table>
Row and column one row and four column..
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
<td>text4</td>
</tr>