Exercise 5 Table Terms and Attributes Defined
A simple explanation of what each one does.
Table Elements
Tables have been used in html for a long time. Originally they were designed to contain tabular data - or information engineers were sending to fellow engineers. Just like tables in any other computer program, they keep pieces of information neatly in place. Eventually graphic designers started using them to keep pieces of their web designs neatly in place. Now web designers are being encouraged to use DIVs and tables are going back to being used for what they were originally designed for.
- <table> </table>
- The table must contain other elements (tags) to work - by itself it does nothing. But add some rows and data cells and the table is ready to work. A table is made of rows and columns. Open with the table tag and after you finish your table completely - use the closing table tag.
- <tr> </tr>
- TR is the Table Row. Use after opening your table. Just like the table, the table row really does nothing until you add more tags into it. Open the TR element, add data cells and close the TR element.
- <td> </td>
- TD stands for table data. It creates a data cell to put your information inside. Open that DT element, add some information - which could be numbers, text, images, multimedia, or even other tables (nested tables) - then close the TD element. Use one, or use many - all within one table row element. Each row must contain the same number of TD's.
- <th> </th>
- TH stands for table headers. They also create data cell to put your information inside. Open that TH element, add your content - then close the TH element. Use one, or use many - all within one table row element. You might put TH elements all along the top of a table or down the side.
- <caption> </caption>
- Use the caption element inside the table tags. It will, by default, add the caption you use, to the top of the table. Open the caption tag, add your text and then close your caption tag. You can also add an attribute to have the caption appear at the bottom of the table.
The Table Attributes
Here are some of the attributes that work with the table tag.
- cellpadding
- Cell padding refers to the space between the cell walls and the items inside. Use pixels to define amount. If you do not add any cellpadding, the items inside by default go right next to the left side cell wall.
- cellspacing:
- Cell spacing refers to the space between each data cell. There is a default 2 pixel width between cells if you do not add your own amount.
TD (or TH) Attributes
Here are some of the attributes that work with the TR tag.
- Column or Row Spans
- Use the colspan to make a cell stretch over 2 or more columns. Make sure the number of columns in each row of your table matches. This is useful for headlines in your tables. colspan="2"
Use rowspan to make a cell stretch vertically over several rows. rowspan="3"
-
- valign
- Use the valign attribute to define where your cell item is placed vertically. The default position is middle. Top or bottom values can be used to line up information in a series of cells. If you use different values, the amount of material inside each cell must be different amounts or you will not be able to tell a difference. If all cells have 2 lines of text, they will all fall in the same position. If you have six lines in one, and two in one and four in another, their positions will look different (middle alignment) unless you tell them to line up one way or another.
valign="top"
CSS for Tables
CSS to define your tables for a consistent look. You can define borders as we did in the demo, but you can also define the width, the background color, the font family, alignment, as well as many other styles. You can also use CSS to style the individual rows or data cells.