Variable Width Tables
When you create a table, the width of the columns is defined by the content of the largest cell. From then on, the size of the table remains unchanged in relation to the browser window. This means that even if you reduce the size of a window, the table size will not be changed, as it is fixed.
In some situations it may be necessary for the table to have a variable size in proportion to the size of the window. This effect may be easily obtained with the WIDTH option of the <TABLE> command.
The Examp13g.htm file shows the the use of the option in which a table is initially created with the fixed-size. Three other tables are then created, one that occupies 50% of the window, another that take up 100% of the window size, and finally a table that occupies 50% of the window and is centered with the <CENTER> command.
<HTML>
<HEAD>
<TITLE>Examp13g</TITLE>
</HEAD>
<body>
<TABLE BORDER>
<TR><TD>Tables with variable width</TD> <TD>are altered</TD></TR>
<TR><TD>automatically</TD> <TD>By the Browser</TD></TR>
</TABLE><p>
<TABLE WIDTH = "50%" BORDER>
<TR><TD>Tables with variable width</TD> <TD>are altered</TD></TR>
<TR><TD>automatically</TD> <TD>By the Browser</TD></TR>
</TABLE><p>
<TABLE WIDTH = "100%" BORDER>
<TR><TD>Tables with variable width</TD> <TD>are altered</TD></TR>
<TR><TD>automatically</TD> <TD>By the Browser</TD></TR>
</TABLE>
<p>
<center>
<TABLE BORDER WIDTH = "50%">
<TR><TD>Tables with variable width</TD> <TD>are altered</TD></TR>
<TR><TD>automatically</TD> <TD>By the Browser</TD></TR>
</TABLE>
</center>
</body>
See what the tables look like when the browser is maximized.
Now see what happen when the browser window is reduced:
Captions
If you want it to create a title or caption for the table, just use the <CAPTION> command right after the <TABLE> command. The Examp13i.htm file shows the use of this command to create a caption above and below a table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>examp13i</TITLE>
</HEAD>
<Table border>
<CAPTION ALIGN=top>Caption with TOP alignment</CAPTION>
<tr>
<td>row 1 column1</td>
<td>row 1 column2</td>
<td>row 1 column3</td>
</tr>
<tr>
<td>row 2 column1</td>
<td>row 2 column2</td>
<td>row 2 column3</td>
</tr>
<p>
<Table border>
<CAPTION ALIGN=BOTTOM>Caption with BOTTOM alignment</CAPTION>
<tr>
<td>row 1 column1</td>
<td>row 1 column2</td>
<td>row 1 column3</td>
</tr>
<tr>
<td>row 2 column1</td>
<td>row 2 column2</td>
<td>row 2 column3</td>
</tr>
</table>
</body>
</html>
The following figure demonstrates the <CAPTION> command:
Cell Spacing
The source code in the Examp13j.htm file, below, shows the effect caused by the CELLPADDING and CELLSPACING options:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<body>
<TABLE BORDER CELLPADDING=10 CELLSPACING=0>
<TR>
<TD>Month 01</TD> <TD>Month 02</TD> <TD>Month 03</TD>
</TR>
<TR>
<TD>Month 04</TD> <TD>Month 05</TD> <TD>Month 06</TD>
</TR>
</TABLE>
<p>
<TABLE BORDER CELLPADDING=0 CELLSPACING=10>
<TR>
<TD>Month 01</TD> <TD>Month 02</TD> <TD>Month 03</TD>
</TR>
<TR>
<TD>Month 04</TD> <TD>Month 05</TD> <TD>Month 06</TD>
</TR>
</TABLE>
<p>
<TABLE BORDER CELLPADDING=10 CELLSPACING=10>
<TR>
<TD>Month 01</TD> <TD>Month 02</TD> <TD>Month 03</TD>
</TR>
<TR>
<TD>Month 04</TD> <TD>Month 05</TD> <TD>Month 06</TD>
</TR>
</TABLE>
</body>
</HTML>
These commands only make sense if used with the BORDER option, as they directly affect the border's appearance due to spacing of the text or the cells themselves. Here is the result:
In this episode, you have seen the main ways of creating tables. This section shows you how to create tables within Tables by nesting commands.
Nesting tables consists basically of creating a table within the cell of another table. In the next figure are two tables. The first contains a row with two cells. Within the first cell there is a complete table. This interior table was defined in the <TD> </TD> command of the first cell.
Below is the source code of this document, Examp13s.htm:
<html>
<head>
<title>Nested tables - examp13s</title>
</head>
<body>
<table border=10>
<tr>
<td>
<table border=5 >
<tr>
<td rowspan=2><img src="pichu.gif" width=160 height=184 border=0>
</td>
<td valign=bottom>Name: Pichi</td>
</tr>
<tr>
<td>Sex: Female</td>
</tr>
<tr>
<td> Loves to make holes in <br> my garden </td>
<td> </td>
</tr>
</table>
</td>
<td> This table contains a row with two columns.<br> While the content of this is only a text, <br> the cell on the left has as content the definition of another table.
</td>
</tr>
</table>
</body>
</html>
You can nest as many tables as you wish. Always remember that each table contained within another must have the <TABLE> and </TABLE> commands, that is, it must be a container element.
👈Episode 12.1. Episode 12.3👉
Share This Post
PRINT THIS POST
No comments:
Post a Comment
If you have any doubts. Please let me know.