HTML › tables |
|||||||||||||||||||||||||||||||||
|
Tables can be very useful tools in your web design arsenal. Not only can they be used to present tabular information (as the name suggests) in a clear and organized way, but they also can be used to structure your entire web page. The originators of HTML did not mean for tables to be used as a layout tool, but web designers use them in this fashion anyway to work around the limitations inherent in the top-to-bottom nature of HTML. These very web pages are all constructed using tables (and tables within tables). ••• tables as, well, tables Let’s start with the basic table as it was meant to be used, to present tabular information. The <table> tag requires a closing tag and includes table rows (<tr>) and table data (<td>) or cells. An optional element is a table header (<th>); I don’t use it much, but I will demonstrate it below. A basic table with two rows of two cells each (with a thin border) looks like this in HTML: This code will render in your browser like this:
Now, this looks fairly bland (and squished), so we can add some attributes to the table and its rows and cells to spruce things up. We can change the alignment of the table ("center," "left," or "right"); change the background color of the entire table, entire rows, or individual cells; or specify its width (in pixels or percentages). We also can add padding between the cell walls and the content in those cells or spacing between the cells. Let’s experiment with some of these attributes: This code will render in your browser like this:
That looks a little more interesting, doesn’t it? Let’s examine what’s going on. In the first line of code, I’ve set the table align attribute to "center" and the background color (bgcolor) to #339966 (a shade of green — the “color” section of this website will explain hexidecimal numbers). I’ve also added some padding between the cell walls and the content of those cells. The cellspacing attribute set to "0" tells the browser that I don’t want any space between the cells. The width attribute set to 50% tells the browser to limit the width of the table to 50% of the available space. In the second line of code, I’ve introduced the <th> tag, which by default centers and makes bold the text designated as the table header. I also added a background color of #FF9933 (orange) to these headers, which overrides the table’s background color. You will notice that because the table is set to a specific width, the text within the cells is forced to wrap. You will notice, too, that the default alignment for the <td> tag is "left." You can change this horizontal alignment AND you can change the vertical alignment (valign) of individual cells or entire rows. You also can span columns and rows (and do all sorts of interesting things) in your tables, with code that looks like this: This code will render in your browser like this:
Now, this table is not terribly appealing (and I wouldn’t recommend that your tables EVER look like this), but it does demonstrate some of the things you can do with various attributes. In this rather ugly table, the <th> tag enclosing “Film” spans the two horizontal columns beneath it (and the align attribute is set to "left"). The cells that contain the images and the film titles span the two vertical cells to the right. The cell that contains The Shawshank Redemption includes the valign attribute set to "bottom;" in the cell that reads The Silence of the Lambs, this valign attribute is set to "top." The cell that contains “Tim Robbins” has an align attribute set to "right," and the cell that reads “Anthony Hopkins” has a bgcolor attribute set to "FFFFFF" (white).
••• tables as layout tools As I mentioned earlier, tables were never really meant to be used to control the structure of an entire web page, but that’s just what savvy web designers realized they could do. Without using tables to control the placement of elements in a web page, web designers would be stuck with a top-to-bottom organization of their content, resulting in some rather unattractive pages. Here’s an example of the first page of this website created without tables: In this no-table example, you can see that the placement of a navigation system is limited to across the top of the page (or in a list type format down the left side of the page). The text, too, spans the entire width of the browser window, making it extremely difficult to read. And the <p> tag that I’m forced to use doesn’t allow me to change its background color, so I’m left with a totally white background. (I could change the <body> bgcolor to the deep green of these pages, but then EVERYTHING would have that background color — and that would be just butt ugly!) I hope I’ve convinced you that creating a web page without tables is very limiting. Now let’s talk about how you can gain more control of how your page looks using tables. Here’s an example of the basic structure of the pages within this website: As you can see, this web page is simply one giant table. Using a table as the underlying structure of my page allows me to control the background color and placement of the elements on my page. I can insert further tables within the cells of that larger table for even more control. You will notice that the table that provides the structure for this web page is set to a width of 640 pixels. Most computer monitors today are set to a default screen resolution of 800 x 600 pixels (the first number is the width), so you would be safe to make this structural table 750 pixels wide (to take into account the “real estate” used up by the browser border and scroll bar); I chose to go with a smaller width because it suited my design better and because anyone with a smaller monitor could still see the pages without having to scroll horizontally.
| |||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||
› tables |