Creating Logical Group of Cells
Internet Explorer has some commands meant to logical separate the parts of a table. These commands do not cause a direct effect in the table; they just make viewing the parts of a table easier, dividing it into three groups: header, body, and footer. These commands serve as reference so that other commands associated with tables can act on these groups of cells.
The commands used for these division are:
<THEAD> Identifies the header rows. Does not need to be closed.
<TBODY> Identifies the body rows. Does not need to be closed.
<TFOOT> Identifies the footer rows. Does not need to be closed.
The next example shows the structure of a table with four rows, the first belonging to the header; the next two to the body; and the last to the footer.
<TABLE>
<THEAD>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TBODY>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
<TFOOT>
<TR>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
These commands will be seen when we use the RULES option of the <TABLE> command next.
Changing the Display of the Cell Borders
Internet Explorer allows the cell borders to be removed or displayed in the different ways. This change is caused by the RULES option of the <TABLE> command, the syntax of which is:
RULES=type
Type specifies which dividing line (cell borders) will be displayed. See the following table:
| None | Remove all the borders of the cells. |
|---|---|
| Group | Displays a horizontal line separating the groups of rows of the table is specified by the <THEAD>, <TBODY>, <TFOOT>, and <COLGROUP> commands. |
| Rows | Displays horizontal lines between the cells. |
| Cols | Displays vertical lines between the cells. |
| All | Displays all the borders of a cell. |
The next illustration shows the effects of the main values of this option on a table. Note that in the case of the groups value, it is necessary for the table to be logically formatted by the <THEAD>, <TBODY>, and <TFOOT> commands for the effect to be applicable.
Below is the source code of this document, Examp13v.htm:
<html>
<head>
<TITLE>Examp13v</TITLE>
</head>
<body bgcolor="#FFFFff">
<table cellspacing=10>
<tr>
<td>
<TABLE BORDER=2 RULES=rows>
<THEAD>
<TR>
<TH>Table 1</TH>
<TH>rules = rows</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR>
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TFOOT>
<TR>
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</table>
</td>
<td>
<TABLE BORDER=2 RULES=cols>
<THEAD>
<TR>
<TH>Table 2</TH>
<TH>rules = cols</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR>
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TFOOT>
<TR>
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</table>
</td>
<td>
<TABLE BORDER=2 RULES=all>
<THEAD>
<TR>
<TH>Table 3</TH>
<TH>rules = all</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR>
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TFOOT>
<TR>
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</table>
</td>
<td>
<TABLE BORDER=2 RULES=groups>
<THEAD>
<TR>
<TH>Table 4</TH>
<TH>rules = groups</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR>
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TFOOT>
<TR>
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</td>
</table>
</table>
</body>
</html>
Changing the Display of the Table Borders
Internet Explorer also allows you to modify the display of the external table borders, in a way very similar to that used for the cell border. In this case, the FRAME option of the <TABLE> command should be used.
See the syntax and the values permitted for this option:
FRAME=type
Type specifies which borders of the table will be displayed. See the following options:
| Void | Removes all the table borders. |
|---|---|
| Above | Displays only the top table border. |
| Below | Displays only the bottom table border. |
| Hsides | Displays only the top and bottom borders. |
| LHS | Displays only the left-hand side table border. |
| RHS | Displays only the right-hand side table border. |
| Vsides | Displays only the side table border. |
| Box | Displays borders at all the corners. |
| Border | Displays the four table borders. |
The next figure shows four applications of this option:
Here is the source code, Examp13x.htm, used to generate the page:
<html>
<head>
<title>examp13x<title>
</head>
<body bgcolor="#FFFFff">
<table cellspacing=10>
<tr>
<td>
<TABLE BORDER=2 frame=above>
<THEAD>
<TR>
<TH>Table 1</TH>
<TH>frame=above</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR>
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TFOOT>
<TR>
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</table>
</td>
<td>
<TABLE BORDER=2 frame below>
<THEAD>
<TR>
<TH>Table 2</TH>
<TH>frame=below</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR>
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TFOOT>
<TR>
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</table>
</td>
<td>
<TABLE BORDER=2 frame=hsides>
<THEAD>
<TR>
<TH>Table 3</TH>
<TH>frame=hsides</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR>
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TFOOT>
<TR>
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</table>
</td>
<td>
<TABLE BORDER=2 frame=vsides>
<THEAD>
<TR>
<TH>Table 4</TH>
<TH>frame=vsides</TH>
</TR>
<TBODY>
<TR>
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR>
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TFOOT>
<TR>
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</td>
</table>
</table>
</body>
</html>
Creating Column Groups
Internet Explorer has an option that allows the application of overall alignment characteristics to groups of column in a table, thus avoiding the individual aligning of each cell. This task is possible thanks to the <COLGROUP> command. It should be specified after the <TABLE> command and before the first <TD> command.
Below is the syntax of this command:
<COLGROUP
ALIGN=position
SPAN=n>
where:
ALIGN = position- Specifies the alignment of the text within the column. The value of ALIGN may be Centre, Left or Right.
SPAN = n- Determines the number of consecutive column to which the properties should be applied.
Below is the code for this example, Examp13y.htm:
<html>
<head>
<title>Group of columns - examp13y</title>
</head>
<body bgcolor="#FFFFFF">
<TABLE border=1>
<COLGROUP ALIGN=LEFT>
<COLGROUP ALIGN=CENTER SPAN=2>
<COLGROUP ALIGN=RIGHT>
<TBODY>
<TR>
<TD>Column belonging to first group</TD>
<TD>Column belonging to second group</TD>
<TD>Column belonging to second group</TD>
<TD>Column belonging to third group</TD>
</TR>
<TR>
<TD>Column belonging to first group</TD>
<TD>Column belonging to second group</TD>
<TD>Column belonging to second group</TD>
<TD>Column belonging to third group</TD>
</TR>
</TABLE>
</body>
</html>
The result is in the next figure:
With all these commands and options you can use your creativity to create high level tables for your pages. But keep in mind that different browsers work in different ways.
👈Episode 12.3 Episode 13.1👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.