Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

HTML Advanced: Tables : Page 9

Step-by-step guides for creating tables and some ideas for ways to use them in your pages.


advertisement
Width, Rules

<table width=XX/XX% rules=rows/cols/none>

Netscape Navigator 4X and later and Microsoft IE3X and later offer some additional controls over table and cell size, and borders through new attributes in the table tag, width and rules. If you are reading this section and don't see the expected effects, your browser may not support them.



Table Width

<table width=XX/XX%>
<td width=XX/XX%>
<th width=XX/XX%>

You can specify the width of a table or the width of a table cell. There is some inconsistency across browsers in how this attribute is implemented, so be sure to do cross browser testing if you are relying on it.

You specify the width as either a specific number of pixel or as a percentage of the page or the table. When you specify a set size, the table or table column remains that size no matter how your reader scales the browser window. When you specify a percentage, the table or table column scales with the browser window. Unless you are reasonably certain that your readers are using a certain size screen, or you want your table or column to be a fixed size, you're better off specifying width as a percentage.

Note: No matter how you're specifying table width, each table has a minimum size and it will never display smaller than that size. The minimum size is calculated by the length of the longest single word in each cell. In the examples below, we can try to set the width at 50 pixels or 2 percent of the browser window, but the table will never display that small because the words Swordtail, Invertebrates, Waterlilies, and Flakes together add up to a minimum table width.

To set a width for your table:

  1. Start the table command as you normally would.

    <table border=3

  2. Type the width attribute and an equal sign.

    <table border=3 width=

  3. Type the number of pixels wide you want your table. Or, type the percentage of the screen you want the table to fill, followed by a percent sign. In this example, the table will fill 75 percent of the screen's width:

    <table border=3 width=75%>

  4. Continue building your table as you normally would. Column widths are automatically calculated based on the table's width, unless you specify a column width in a table definition tag. In this example, the table will fill 75 percent of the screen's width, and the first column will fill 50% of the table's width:

    <table border=3 width=75%>
    <td width=50%>Description of the problem:</td>

In the example below, the first table has a fixed width of 500 pixels. It does not resize to fit into the browser window. In the second table, the table's width is set to be 75% of the browser window and the first column is set to be 25% of the table's width.

<table border=1 width=500>
<tr>
<th>Fish</th>
<th>Invertebrates</th>
<th>Plants</th>
<th>Food & Nutrients</th>
</tr>
<tr>
<td>Guppy</td>
<td>Snail</td>
<td>Duckweed</td>
<td>Flake</td>
</tr>
<tr>
<td>Swordtail</td>
<td>Crayfish</td>
<td>Waterlily</td>
<td>Pellet</td>
</tr>
</table>

In this table, if you change the size of your window, the table width and the column width both rescale to adapt to the window's new size.

<table border=1 width="75%">
<tr>
<th width="25%">Fish</th>
<th>Invertebrates</th>
<th>Plants</th>
<th>Food & Nutrients</th>
</tr>
<tr>
<td>Guppy</td>
<td>Snail</td>
<td>Duckweed</td>
<td>Flake</td>
</tr>
<tr>
<td>Swordtail</td>
<td>Crayfish</td>
<td>Waterlily</td>
<td>Pellet</td>
</tr>
</table>

Turning Rules on and Off

<table rules=cols/rows/none>

If your readers are using Microsoft Internet Explorer 3.X or later, or Navigator 4.X or later, you can show them a table with different divider rules turned on or off. You do this by adding the rules attribute to the table tag.

In the examples below, the first table gives the rules attribute a value rows to display only the row divider rules. In the second table, the rules attribute value is cols to show only the column dividers. In the third the rules attribute value is none to turn of the rules.

<table border=1 rules="rows">
<tr>
<td>Fish</th>
<td>Invertebrates</th>
</tr>
<tr>
<td>Guppy</td>
<td>Snail</td>
</tr>
<tr>
<td>Swordtail <td>Crayfish </tr>
</table>

This table displays column rules only:

<table border=1 rules="cols">
<tr>
<td>Fish</th>
<td>Invertebrates</th>
</tr>
<tr>
<td>Guppy</td>
<td>Snail</td>
</tr>
<tr>
<td>Swordtail <td>Crayfish </tr>
</table>

This table displays no rules:

<table border=1 rules="none">
<tr>
<td>Fish</th>
<td>Invertebrates</th>
</tr>
<tr>
<td>Guppy</td>
<td>Snail</td>
</tr>
<tr>
<td>Swordtail <td>Crayfish </tr>
</table>



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date