| |
lecture 4: controlling tables
This slide summarises the main ways in which you can control the appearance of tables and table cells (beyond, of course, what you actually put inside them!). More detail on all of these can be found in the online teaching materials and you should consult these if you want to use any of these techniques.
width |
Unless you have a good reason not to, always define widths using relative values (percentages) as this means they will resize properly in different window sizes. Remember that widths are defined relative to whatever the element is within. In other words, width for a <table> tag specifies the width relative to the browser window or to a table cell, if the table is nested inside another. width for a <td> is usually relative to the width of the table.
|
backgrounds |
Use background-color or (once you know how to do these) background-image. Remember to make sure your text is visible against the background!
|
borders, padding and margins |
These can be fiddly but are also very useful for subtly tidying up your page. The best thing to do is read the page devoted to them in the online teaching materials.
|
colspan and rowspan
|
Not all rows in your table have to have the same number of columns/cells. colspan can be used to get a <td> tag to span two or more columns, rowspan (which is rarer but still useful) to span two or more rows. The best place to see an example of this is in the page on whole page layout in the online teaching materials.
|
For an example of several of these techniques used together have a look at this "Mondrian" page which will open in the second browser window. You can have a look at the source code if you like although bear in mind there is a rather simpler example on the next slide!
|
