Table of ContentsContents
|
Tables CodeTables allow you more control over formatting your webpage. Without tables, text and images will just be loaded from left to right. A webpage viewed by someone with a 640 X 400 screen resolution will squeeze the webpage content into a longer skinnier format while the same webpage veiwed at 1024 x 768 screen resolution will be vertically much shorter and wider.Without tables there would be no way to have columns of text or charts. With some simple tables code you can fix the width of your page's contents to a certain desired size. You may choose that size to be 640 pixels because that, being the lowest screen resolution will guarentee that no one will have to scroll sideways in order to see the whole page. (a real inconvenience) People using higher screen resolutions will simply have a margin of empty space to the left and right of your webpage. Furthermore, you'll know that your content's formatting will otherwise look the same to everyone. (as far as where pictures go and how the text wraps from left to right) Some basic tags and a few commonly needed attributes for tables are... <table> and </table> to open and close table code with attributes 'width=' to specify width of table, 'border=' to specify number of pixels thick border is (could be '0' for no border), 'cellpadding=' to add margin-like space within a cell and 'cellspacing=' to thicken the space between cells. <tr> and </tr> to open and close a row in a table <td> and </td> to open and close a cell inside a row in a table with attributes 'width=' to define width of cell (the width of all the cells in a row must add up to the table width) and 'valign="top"' which will force cell contents to the top of the cell
A Simple One Cell Table To Control Webpage WidthPerhaps the simplest use of tables is to control the width of a page viewed on computers with different screen resolutions as described in the first paragraph of this page. An example of the code for this one celled table (starting after the body tag) would be...
<center> (Code of webpage goes here)
</td> The first and last lines center the table on the page. The second line starts the table and defines the width to be 640 pixels. The table's border is set to 0 so that there will not be a line enclosing the contents of the page. The third line starts the first (and only) row in the table. The fourth line starts the first (and only) cell in the first row of the table and it's width is set to the width of the table, 640 pixels. After the fourth line is all the code that normally would create the webpage. Then the </td> closes the only cell and the </tr> closes the only row and the </table> closes the table itself.
A Simple Two Cell Table To Set Aside a Column For A MenuThis code would create a single row with two cells. The first cell on the left will be 100 pixels wide and the cell on the right will be 540 pixels wide. This is the exact same table structure that is used in the webpage you're reading right now (you could click 'view' and then 'source' in Internet Explorer to see that code)...
<center> (Code of Table of Contents goes here)
</td> (Code of rest of the Webpage goes here)
</td> Now we have the border set to 1 pixel to divide up the cells (not necessary) and a cellspacing of 8 to provide a bit of a margin so the text isn't slammed right up against the borders and cellspacing set to 0 to make minimalize the separation between the borders. The 'valign="top"'pushes the table of contents to the top of it's cell. (Otherwise it would be vertically centered in a very long skinny cell and not be visible until you scrolled half-way down the page) Note that the 540 pixel wide cell and the 100 pixel wide cell add up to the 640 pixel wide table. The whole table has one row and in that row are two cells now. Each opening tag has a corresponding closing tag and a cell in a row must be closed before that row is closed. Likewise, a cell cannot be opened before the row it is in is opened.
ChartsSometimes it is useful to have a bunch of rows and a bunch of cells in each row with borders separating them to make a chart. It is really just a further elaboration of the examples above. Here is the code that creates the chart below it...
<CENTER>
<tr>
<tr>
<TR>
<tr>>
<tr>
</table>
|