|
Advanced Tables |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Tutorials Tools Reference Pages
|
In lesson 4 you were introduced to the basics of HTML Tables. Tables are important and powerful tools for controlling layout on your web pages and they offer some more advanced features, which I'm going to demonstrate in this lesson. As an example, I'm going to tabulate (put into a table) some selections from my CD collection. I could create a simple table using the techniques shown in lesson 4 like this: <TABLE BORDER="3" CELLPADDING="3"
CELLSPACING="0"> Note that I've used the <B> and </B> bold tags to pick out the Artist and Title headings. The table looks like this:
It conveys the necessary information, but it could be improved. For example, the artist's name is listed for every entry, it's not necessary and it gives the table an unnecessarily cluttered appearance. To solve this problem we can create table cells that span several of the table's rows, and we only have to list each artist once. To do this we use the ROWSPAN attribute, which tells the browser we want that table cell to take up more than one row. In the table cell containing the artist name "The Cult" I've inserted the attribute ROWSPAN="3" because there are three entries for that artist, and I want the cell to span three rows. In the table cells for "Dream Theater" and "Beethoven" I've inserted ROWSPAN="2" because they each have two entries. I've also used the attributes ALIGN="CENTER" which aligns the contents of a cell horizontally to the center of the cell, and VALIGN="MIDDLE" which aligns the contents vertically to the middle of the cell. Experiment with using ALIGN="LEFT", ALIGN="RIGHT", VALIGN="TOP" and VALIGN="BOTTOM" instead: <TABLE BORDER="3" CELLPADDING="3"
CELLSPACING="0"> Here's the resulting table:
As well as having cells that span several rows we can also have cells that span several columns using the COLSPAN attribute. To demonstrate this I've subdivided the table into three different categories: "Rock", "Classical" and "Jazz" by inserting three new rows into the table in the appropriate places. The rows look like this and if you take a look at the resulting table below it should be obvious where to insert them: <TR> Here's the table:
We have a final layout for our table, but it's still not particularly attractive, so I'm going to show you a simple trick to improve the appearance of your tables. I've used the BORDER="0" attribute to hide the border of the table and the lines between the cells. I've also used CELLPADDING="4" to set the amount of space between the edges of the cells and their contents to four pixels (individual dots on the screen) and CELLSPACING="4" to set the amount of space between the edges of the cells to four pixels, so the <TABLE> tag itself now looks like this: <TABLE BORDER="0" CELLPADDING="4" CELLSPACING="4"> I've also used the BGCOLOR attribute to set a background colour in every table cell (copy and paste comes in extremely useful when coding HTML). In the table cells for the "Rock", "Classical" and "Jazz" categories I've used the colour code "#440000" which gives a darkish red, and in every other table cell I've used "#000044", a dark blue. There is a list of common colour codes you can use in this feature. The BGCOLOR attribute goes in the <TD> tag like this: <TABLE BORDER="0" CELLPADDING="4"
CELLSPACING="4"> And so on throughout the rest of the table, which ends up looking like this:
Experiment with putting the BGCOLOR attribute into the <TABLE> tag instead of the individual <TD> tags to see what happens. Taking Tables Farther There are many more things you can do with tables. It's very common for tables to be used to control the layout of entire web pages. By using BORDER="0" to hide the outlines of the cells you can lay out whole pages using an "invisible" table. It's even possible to put entire tables inside the cells of other tables by using a structure like this:
<TD><TABLE> This technique is known as nested tables because tables are nested within the cells of larger tables. It's also possible to create table cells which span more than one row and more than one column by using both the ROWSPAN and the COLSPAN attributes in a single cell (try this out!). You can put graphics as well as text into table cells, in fact you can put anything you can put on a HTML page into a table cell. This is what makes them such powerful layout tools. You can control the width of a table by inserting the WIDTH attribute into the <TABLE> tag, either as an exact number of pixels (e.g. WIDTH="300") or as a percentage of the width of the browser window (e.g. WIDTH="90%"). You can also specify the width of individual table cells by inserting the WIDTH attribute into the <TD> tag in the same way, though if you specify a percentage in this case it is a percentage of the width of the table rather than the browser window. Try using tables to lay out a basic web page, and then check out this feature for a new tutorial next month!
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||