|
Home : Tutorial Nine : Next Tutorial Tutorial Nine: TablesWhy
Use Tables? As previously mentioned, tables are simply containers which can assist the challenging task of presenting your document in an appealing manner, providing more precise control in the placement of images and text, or even creating newspaper style columns. The majority of HTML tutorials class tables as 'advanced', whereas they are now one of the most basic methods of good page creation - not difficult to learn they are nonetheless a lengthy topic . Most HTML editing software allows you to create tables quickly via table 'wizards', but it is important to understand the correct table syntax. HTML 4.0 has introduced a number of new tags that are not consistently implemented across browsers and therefore will not be covered in this tutorial. Because of the limitations of HTML - remember it was never designed to be a layout tool - tables have moved away from their original purpose which was to contain tabulated data, although they are still useful in that regard. It is possible to create a simple one cell table - like the one used to contain this tutorial - or a more complex structure such as the main CDL page. One of the main reasons for introducing a table is to create margins for text. HTML text will naturally spread out to the edges of the browser window. This can be controlled somewhat by the marginwidth, marginheight, leftmargin and topmargin attributes of the <body> tag, but the right hand margin is governed by the width of the browser. It is an uncontrollable element. We can force-contain text by inserting it into a table, its width being set to either a percentage of the browser window - allowing some resizing - or a specific pixel width - allowing no resizing. This can be a crucial requirement for sites which are design-intensive. It is also much easier to read text that is justified and aligned, rather than floating off into the page margins.
It is sometimes necessary to slice a graphic into seperate pieces - to incorporate javascript image flips or to specify different hyperlinks for each section. This is another topic in itself, however tables are used to recompile the image to create the illusion that it is whole - rather like putting a jigsaw together. Because they can end up being quite complex, it it always a good idea to plan your table carefully on paper as a first step - consider how many rows <tr> and columns <td> you may require. Alterations can be made at any time: Tables are built from left to right, beginning with <table> and ending with </table> - this is the actual container for the entire table. Next we create a row <tr> and within that row a data cell <td> or column. Each data cell must be closed by </td> and the row by </tr> - ommiting an end tag is asking for trouble and can affect CSS. Netscape in particular will not know what to do with a table if the ending </table> is omitted and will not display much of the page. The following example is a table consisting of 2 rows, each containing 2 data cells.
Let's look at the markup for this simple table:
Indenting your table elements in this way is imperative when dealing with more complex structures, and it is a good habit to create HTML in a 'tidy' manner, keeping tags on seperate rows for instance - finding an incorrect or missing tag can otherwise be a nightmare task. Any extra spaces or breaks will not appear on the page itself: as previously discussed they are ignored by the browser. Good HTML software will do this automatically for you and will even color code different elements. A size can be set for an entire table or for individual cells, either in fixed pixels or as a percentage of the browser window or table - whatever size that may be. The invisible table containing this tutorial is set to 600 pixels, <table width="600"> - no matter how big or small you make the browser window the table width remains set. If you wish the table to resize itself automatically depending on the browser window, percentage must be used instead, <table width="90%"> - in this case the browser will calculate 90% of it's current size and adjust the table width accordingly. Not specifying a width defeats the purpose of using tables in the first place, as the table will simply fill the browser window anyway. Setting a minimum table size relies on the actual content - if the longest word in a cell is supercalifragilisticexpealidocious, the cell can be no smaller. Despite the fact that we may set the table width to 10 pixels, the width of the content will not be overridden. The widest cell widths will dictate the widths of other cells in columns below or above. <td width="100"> or <td width=50%> are examples. Table height is normally not so important as cells expand automatically to accomodate content, however Netscape 4.0+ allows you to specify the height of the table in pixels and Internet Explorer 4.0+ allows both pixels and percentages The example table above has a 1-pixel 3D border. This is a table default. Borders can be set to any thickness by including a simple tag - <table border="10">
The bordercolor attribute is currently supported by version 4+ browsers and is an HTML 4.0 standard. <table bordercolor="#cc3300"> Internet Explorer (version 3+) colors the entire table border, including cell borders, flattening the border; Netscape only colors the outer border of the table, preserving the 3D effect. It is possible to color individual cell borders <td bordercolor="#cc3300"> but this has limited support across browsers.
It is easy to confuse these two table attributes, both of which offer control of the space around cells. Both operate across the entire table. Cellpadding refers to the amount of space between the wall of the cell and its contents - you can 'pad out' a cell by adding more space:
Any of the 3 attributes can be used in combination for desired effect Spanning refers to the ability to create a cell that stretches across a number of rows or columns. This can be another confusing set of attributes - colspan allows a cell to span the width of a set number of columns and rowspan allows a cell to span the width of a set number of rows. The best explanation is a visual example:
An entire table can be aligned left (default), right or center to the page by enclosing everything surrounded by <table> </table> with either a <p align="center"> or <div align="center"> or <center> tag. Whichever you chose to use, remember to end the alignment with a closing tag. Alignment is important in creating a consistent and neat appearance. Content within cells can also be aligned by adding a series of attributes. Both <tr> and <td> support the align and valign attributes. Align causes cell data to align itself horizontally inside a cell - left (default), right or center. Valign causes cell data to align itself vertically inside a cell - top, center (middle) or bottom. Any combination of align and valign can be specified.
Table cells can be filled with a solid hex color - either individually or as an entire table by using <table bgcolor="#color"> or <tr bgcolor="#color"> or <td bgcolor="#color">. Specifying bgcolor for a row overrides any color set for the table, and specifying bgcolor for a cell will override both.
or
This is quite effective and can be used to compliment other design elements as in the CDL main page, but don't do it just because you can, only if it enhances what you have to say. Adding a background image to a table or table cell is similar to adding a background image to an entire page, the difference being that it is not so widely supported. A solution to this problem is to use a background image that does not have a crucial bearing on the page as a whole. A bgcolor can also be set, causing browsers who cannot read the background image to at least see the background color. The syntax would be <table background="image.gif" bgcolor="#"> or <td background="image.gif" bgcolor="#">. This attribute should be used with consideration - the hierarchy of table background verses table data cell color appears to present differently with different browsers. Test before committing to one particular method. Another problem is that Netscape Navigator will display a table background only in the cell space itself - this is only a problem if cellspacing has been specified, where the space between cells will not contain the image.
It is quite legitimate, and often necessary, to 'nest' one table inside another. Again, the CDL main page can be used as an example - a number of tables have been employed to create the desired effect. The main point to remember in doing so, however, is to end all tags appropriately and to write the HTML in a logical and readable manner - utilising comment tags to mark the start of one particular tables is advisable. If you think of a table as a container, then you are simply placing a smaller container inside a larger one - like a tupperware set. The newly inserted table must exist in a logical place within the initial table - it must be inside an existing cell as it becomes the content of that cell.
And here is the simplified HTML for this example:
Browsers need to determine the entire table layout before displaying its contents - nested tables are a great aid to web page design but avoid lengthy tables and overuse.
Table
Tips - General Table Information
Cell
Height Captions
Table
Headers
Adding
Images as Content
Preventing
Text Wrapping <td nowrap>
Table
Rules
This tutorial series was authored by Wendy Phillips It is copyrighted which means you may not pinch any of it |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
