"Tables were introduced in version 3.0 of the HTML language, and have had a series of extensions created by Netscape and Microsoft. Not all of the table commands will work in all browsers. Working with tables may seem difficult at first; however, after learning the formatting commands, creating them becomes quite quick and easy.
Tables have a structure similar to that of an electronic spreadsheet. They are made up of rows and columns, the intersections of which form what is called a cell. A cell may contain simple text, hypertext, or even an image. Next, we'll take a general look at the commands related to tables."
Table Commands
<TABLE></TABLE> :-
A table is created with the <TABLE> and </TABLE> commands. Between these commands, the other commands responsible for the creation of rows, cells, titles, borders, and alignment of the table should be specified. As standard, tables are created without borders, that is, the horizontal and vertical lines separating the cells do not appear.
<TR></TR> :-
The table row commands, <TR> and </TR>, are used to create a row of the table. If a table has 5 rows, 5 pairs of this command must be specified.
<TD></TD> :-
The table data commands, <TD> and </TD>, are used to specify the contents of a cell. These commands should be specified in pairs for each cell of the row. They should be used between the <TR></TR> commands. Unlike spreadsheets, a table does not need to have the same number of cells in each row. The width of a column is defined by the width of the largest cell belonging to the column.
The content of a cell is aligned with the ALIGN option. As standard, the horizontal alignment of the text is to the left (ALIGN=left) and the vertical alignment is in the middle of the cell (VALIGN=middle).
<TH></TH> :-
The table header commands, <TH> and </TH>, are used to create cells in the same way as the <TD></TD> commands, except that the text in the cell is bold and centered.
<CAPTION></CAPTION> :-
<CAPTION> allows for the creation of a caption for the table. A caption is text appearing before or after the table. These commands should be specified after the <TABLE> command and before the <TR> commands. A caption may be displayed at the top or the bottom of the table, depending on the value attributed to the ALIGN option, which may be Top or Bottom (the standard is Top). The caption is always horizontally centered.
Next are options that can be used with the commands described above.
Options Used with Table Commands
BORDER :-
The BORDER option is used with the <TABLE> command. If it is specified without any value, a thin line is created around all the cells. The value 0 is equivalent to having no border. The larger the value specified, the thicker the border.
ALIGN :-
The ALIGN option appears in several HTML commands, not just those related to tables. It is used to position text in a cell or row. Within the <CAPTION> command, it may take on the values Top or Bottom. Within the <TR>, <TH> and <TD> commands, it may take on the values Left, Center or Right.
VALIGN :-
VALIGN is equivalent to the ALIGN option, except it works to vertically align the text in the row or cell. The possible values are Top, Middle, Bottom, and Baseline, with Middle being the standard.
NOWRAP :-
This option may appear in any cell of the table and indicates that the text of the cell cannot be broken to adjust to the size of the cell.
COLSPAN :-
COLSPAN may appear in any cell of the table. It specifies how many columns of the table the cell should occupy. The standard value is 1.
ROWSPAN :-
The ROWSPAN option works like COLSPAN, except that it specifies how many rows the cell should occupy, The standard value is 1.
CELLSPACING :-
CELLSPACING defines the spacing, in pixels, between the cells of the table.
CELLPADDING :-
CELLPADDING define the spacing, in pixels, between the columns and rows of the table.
Now that you know about the commands used to create tables, let's look at some practical examples.
Creating a Simple Table
The logic of creating a table is the following:
- Use the <TABLE> command to specify that a table is being created.
- Use the <TR> </TR>commands to create a row of the table.
- Use the <TD> </TD> command to create each cell of a row.
- Use the </TABLE> command to close the table.
- Use options to change the appearance of the table.
A Simple Table :-
The next listing (Examp13b.htm) shows the commands needed to create a table with three rows and three columns.
<HTML>
<HEAD>
<TITLE>examp13b - A simple table</TITLE>
</HEAD>
<body>
<Table border>
<tr>
<td>Line 1 column1</td>
<td>Line 1 column2</td>
<td>Line 1 column3</td>
</tr>
<tr>
<td>Line 2 column1</td>
<td>Line 2 column2</td>
<td>Line 2 column3</td>
</tr>
<tr>
<td>Line 3 column1</td>
<td>Line 3 column2</td>
<td>Line 3 column3</td>
</tr>
</table>
</body>
</html>
This code generates the following table:
Note that the BORDER options exists in the <TABLE> command. It is what creates the border surrounding the cells of the table. If you do not specify it, the table is assembled without the border.
Expanding a Cell Over the Columns :-
The Examp13.htm file shows the use of the COLSPAN option to increase the size of a cell and have it occupy adjacent columns. Note that the content of this cell is centred with ALIGN=Center.
<HTML>
<HEAD>
<TITLE>examp13c</TITLE>
</HEAD>
<body>
<table border>
<tr>
<td>Line1 column1</td>
<td align=center colspan=2>Line1 column2-3</td>
<td>Line1 column4</td>
</tr>
<tr>
<td>Line2 column1</td>
<td>Line2 column2</td>
<td>Line2 column3</td>
<td>Line2 column4</td>
</tr>
<tr>
<td>Line3 column1</td>
<td>Line3 column2</td>
<td>Line3 column3</td>
<td>Line3 column4</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</HTML>
See the result:
Change the value of COLSPAN to 3, Save the file, and reload it. See what happens to the table:
Many times, this effect can be interesting in creating a table.
Expanding a Cell Over the Rows :-
The Examp13d.htm file shows the use of the ROWSPAN option to increase the size of a cell and have it occupy adjacent rows. Note that the content of the cell is centered with VALIGN=Top.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<body>
<table border>
<tr>
<td>Line1 column1</td>
<td>Line1 column2</td>
<td>Line1 column3</td>
<td>Line1 column4</td>
</tr>
<tr>
<td>Line2 column1</td>
<td valign=top rowspan=2>Line2 column2</td>
<td>Line2 column3</td>
<td>Line2 column4</td>
</tr>
<tr>
<td>Line3 column1</td>
<td>Line3 column3</td>
<td>Line3 column4</td>
</tr>
<tr>
<td>Line4 column1</td>
<td>Line4 column2</td>
<td>Line4 column3</td>
<td>Line4 column4</td>
</tr>
</table>
</body>
</HTML>
See the effect of these commands:
If you expand a cell and there already is another cell in the place it is expanded, all the other cells will be displaced to the right or downwards. In the above example, if we change the value of ROWSPAN from 2 to 3, the table will take on the following form:
To correct this table, delete the "Line4 Column2" cell.
Column Titles
With the<TH> commands, you can specify headings for the columns. These commands work in the same way as the <TD> commands except that the content of the cell is centered and bold. The Examp13e.htm file shows the use of these commands.
<HTML>
<HEAD>
<TITLE>Examp13e - Titles</TITLE>
</HEAD>
<body>
<table border>
<tr>
<TH>Title1</TH> <TH>Title2</TH> <TH>Title3</TH>
</tr>
<tr>
<td>Line1 column1</td>
<td>Line1 column2</td>
<td>Line1 column3</td>
</tr>
<tr>
<td>Line2 column1</td>
<td>Line2 column2</td>
<td>Line2 column3</td>
</tr>
<tr>
<td>Line3 column1</td>
<td>Line3 column2</td>
<td>Line3 column3</td>
</tr>
</table>
</body>
</HTML>
Simple, isn't it? Now see what it looks like:
Variation of Titles :-
You can combine these commands with others to create subtitles and titles for rows. See the Examp13f.htm file, in which both of these effects are used.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<body>
<TABLE BORDER>
<TR>
<TH COLSPAN=2>Title1</TH>
<TH COLSPAN=2>Title2</TH>
</TR>
<TR>
<TH>Sub1</TH> <TH>Sub2</TH>
<TH>Sub3</TH> <TH>Sub4</TH>
</TR>
<TR>
<TD>ITEM A</TD> <TD>ITEM B</TD> <TD>ITEM C</TD> <TD>ITEM D</TD>
</TR>
<TR>
<TD>ITEM E</TD> <TD>ITEM F</TD> <TD>ITEM G</TD> <TD>ITEM H</TD>
</TR>
</TABLE>
<p>
<TABLE BORDER>
<TR><TH>Title1</TH>
<TD>ITEM A</TD> <TD>ITEM B</TD> <TD>ITEM C</TD></TR>
<TR><TH>Title2</TH>
<TD>ITEM D</TD> <TD>ITEM E</TD> <TD>ITEM F</TD></TR>
<TR><TH>Title3</TH>
<TD>ITEM G</TD> <TD>ITEM H</TD> <TD>ITEM I</TD></TR>
</TABLE>
</BODY>
</HTML>
See the result:
Borders
Creating borders can be useful, but they are not necessary in many cases so for you have seen tables that used a border generated by adding the BORDER option to the <TABLE> command.
The Examp13b.htm file shows two tables where the values 10 and 5 are specified for the border and a third where no value was specified for the border.
<HTML>
<HEAD>
<TITLE>Examp13b</TITLE>
</HEAD>
<body>
<Table border=10>
<tr>
<td>Line 1 column1</td>
<td>Line 1 column2</td>
</tr>
<tr>
<td>Line 2 column1</td>
<td>Line 2 column2</td>
</tr>
<tr>
<td>Line 3 column1</td>
<td>Line 3 column2</td>
</tr>
</table>
<p>
<Table border=5>
<tr>
<td>Line 1 column1</td>
<td>Line 1 column2</td>
</tr>
<tr>
<td>Line 2 column1</td>
<td>Line 2 column2</td>
</tr>
<tr>
<td>Line 3 column1</td>
<td>Line 3 column2</td>
</tr><p>
</table>
<Table>
<tr>
<td>Line 1 column1</td>
<td>Line 1 column2</td>
</tr>
<tr>
<td>Line 2 column1</td>
<td>Line 2 column2</td>
</tr>
<tr>
<td>Line 3 column1</td>
<td>Line 3 column2</td>
</tr>
</table>
</body>
</HTML>
See the result:
You can create a table without borders to assemble a menu where the options are not completely vertical, as as is the case when you use the the list creation commands.
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.