HTML tables and TABLE tags

#EasilyLearnHtmlWebDesignCourse
--- #series6(HTML 4 and 5 tables) #Chapter1

-----HTML Tables and the TABLE tags--------

:::Note:::: hi guys, its your favorite Admin, Biigzee, i would like to know how serious my fellow geeks are to increase their programming knowledge. Do you know i Have a self built operating system like windows and mac? of course that a lot of work, but i was able to archived it. it all depend on hard work and our zeal to grow. the web design tutorials was off for some time and no body noticed. This could mean no body was following??? i will plead with us all to learn once and move on to other tasks. it depends on you, and you alone, The will to learn is derived, not given --- (ZinoAdidi 2013) :::::::::

>>>>>>>>>>>>>>>>>>>
<<<<<<<<<<<<<<<<<<<
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.

First, we'll create a basic HTML table. This will work in all versions of HTML, and not just version 5. The table presents information about each browser's support for CSS version 3. From the table, it's easy to see that CSS animations only work in Chrome and Safari (the latest browser versions here are Firefox 10 and greater, Internet Explorer 9, Chrome 10, Safari 5, and Opera 11.1).
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:

<CAPTION>CSS3 Browser Support (latest browser versions)</CAPTION>


Table Attributes

The TABLE tag comes with optional attributes you can use:

Align
Border
Bgcolor
Cellpadding
Cellspacing
Height
Width

(There's also Frame, Rules, and Summary, but we won't be discussing these.)

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:

<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.

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.

by #AdminBiigzee