HTML Tables and the TABLE tags
Tables were introduced to HTML as a way to make textual data look more presentable on the screen. Things like statistics could be presented in neat rows and columns, making them easier to read.
Tables can also be used for web pages layouts, but the practice is now frowned upon. Some people even have a pathological hatred for layouts using tables. Don't let this put you off, however. Using tables for layouts can actually be easier than using CSS! We won't be using tables for web page layouts, though, but simply to present tabular data.
(NOTE: Our entire Home and Learn website uses tables for layout. This is because it was started in 2002. We could, of course, change to CSS layouts, but as it is such a big site it would take many months of work and costs a fortune. And very few people would notice the difference!)
First, we'll create a basic HTML table. This will work in all versions of HTML, and not just version 5. Here's the basic table we'll design.
We'll create another table later that uses HTML5 and CSS3.
The Table Tags
To create a table you need to use the following basic table tags: TABLE, TR, TD. They are laid out like this:
<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>
The table tags come in pairs. To set up the table, the TABLE tag is used. There is a start tag and end tag. In between these two tags are the table Row tags <TR> </TR>. For every Row in your table, you need at least one Table Data tag <TD> </TD>. The Table Data tags represent the cells in each row. In the example picture above, we have a table with four rows. In each row we have a CSS property followed by 5 cells for browser information. So each Row in our table has six Cells in it. For one individual Row, the code would look like this:
<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
That code means set up a table with one Row, and put six cells into the Row.
The information you want people to see goes between the two TD tags:
<TABLE>
<TR>
<TD>Cell 1 Data</TD>
<TD>Cell 2 Data</TD>
<TD>Cell 3 Data</TD>
<TD>Cell 4 Data</TD>
<TD>Cell 5 Data</TD>
<TD>Cell 6 Data</TD>
</TR>
</TABLE>
You can also add an optional CAPTION tag, after the pair of TABLE tags:
Table Attributes
The TABLE tag comes with optional attributes you can use:
Border
Bgcolor
Cellpadding
Cellspacing
Height
Width
The table from our image had a border of 1 pixel. The cellpadding was 10 and the cellspacing was 2. We also centre-aligned our table. The TABLE tag code was, therefore, this:
Cellpadding, incidentally, is the space between the text and the cell borders; cellspacing is how far apart each cell is from its neighbour.
Row Height and Row Width
You can make changes to the Height and Width of not only the entire table, but to each individual cell, or row of cells. Just add Width and Height attributes to the TR or TD cell. Like this:
<TABLE>
<TR Height = 50 Width = 100>
<TD>Cell 1 Data</TD>
<TD>Cell 2 Data</TD>
<TD>Cell 3 Data</TD>
<TD>Cell 4 Data</TD>
<TD>Cell 5 Data</TD>
<TD>Cell 6 Data</TD>
</TR>
</TABLE>
You can add the Height and Width attributes to individual TD cells, too, but the results are often erratic. If you want one big cell next to smaller cells, the ROWSPAN and COLSPAN tags are used.
In the next lesson, you'll learn about row and column spanning.
Friday 10 July 2015
HTML Tables and the TABLE tags
<CAPTION>CSS3 Browser Support (latest browser versions)</CAPTION>
Align
(There's also Frame, Rules, and Summary, but we won't be discussing these.)
<TABLE Border = "1" CellPadding = "10" CellSpacing = "2" Align="center">
We didn't specify a width, as the default is the length of your text plus any borders, padding and spacing. The default colour is none. Like all colours, though, it can take a value like "Red", or a HEX/RGB colour.
0 comments:
Post a Comment