|
Basic Table Elements Tables have two basic elements, columns and rows, which break the table up horizontally (columns) and vertically (rows). You can manipulate these as to width, color, alignment, and placement within the table. For example, a row can be one or multiple columns wide, aligned to the top, bottom or center of the table and made a paticular color. Columns can also be one or multiple rows deep, aligned to top, bottom or center of row, and made a particular color, as can the color of the text within the column (this, like many other things, doesn't always work with AOL, so be cautious and check it). Tables can also be nested, one within another, to further set off/highlight data or information, as well as giving the page a uniform look as to width, size, placement or alignment. Further info on how to do this, as well as the specific do's and don'ts to these tricks can be found in the link below called "The Table Sampler". I recommend you read this thoroughly before attempting any 'fancy' tables. Structure and Appearance The particular idea I want to get across as to the 'style' of tables to be used in sites built by me is that of legibility, control and consistency -- if editing needs to be done on your HTML, by you or I, and we cannot easily locate and manipulate the particular elements of the table or the data within the table, the code doesn't meet the standards. Tables allow for many specific parameters that affect placement, size, etc., and we set them to "0" if we're not using them ourselves (examples below). Font size and face must be set for each data cell, and the width tag is the most important for consistency as the topmost row will frequently set the placement for all other rows in that table. Bear in mind the importance of placement for elements/tags in the structure of your tables, especially when dealing with nested tables, and mark the beginning and end of each table with comment tags as it occurs. It is also helpful to leave a space in your code between table elements such as data cells. For example: <!--begin framing table --> <table width="90%" align="left" valign="top" vspace="0" hspace="0" border="0" cellpadding="3" cellspacing="0"> <tr><td align="left" valign="top"><font face="helvetica, arial" size="2"> data in this column of this row </td> <td align="left" valign="top"><font face="helvetica, arial" size="2"> data in the next column of this row </td></tr> <tr><td align="left" valign="top"><font face="helvetica, arial" size="2"> <!--begin interior table one --> <table width="50%" align="left" valign="top" vspace="0" hspace="0" border="0" cellpadding="3" cellspacing="0> <tr><td align="left" valign="top"><font face="helvetica, arial" size="2"> data in this column of this row of this table </td> <td align="left" valign="top"><font face="helvetica, arial" size="2"> data in the next column of this row of this table </td></tr> <!--end interior table one --> </table> </td></tr> <!--end framing table -- > </table> If you have more specific questions as to tables after reading this and reviewing the links below, please ask. Resources/Guides Tables: Design assistance from organizing data to highlighting information
|