Exercise 7 Demo: Part C : Tables
Table Row and Table Data Attributes
To change more things about tables we can add attributes to the <tr>
or
<td>
tags. Adding an attribute to the <tr>
tag will modify all content within that row. It will also override a similar attribute place in a
<table>
tag.
Attributes you can add to table rows include:
- align="x" where "x"= left, right, center
- valign="x" where "x"= top, middle, bottom, baseline
- bgcolor="#xxxxxx"(hex code)
An attribute in the <td>
tag will only affect that specific data cell,
but will override any similar attribute placed in a previous <tr>
tag or
<table>
tag.
Attributes you can add to the table data tag include:
- align="x" where "x"= left, right, center
- valign="x" where "x"= top, middle, bottom, baseline
- bgcolor="#xxxxxx"(hex code)
- width="x"
- height="x"
- colspan="x"
- rowspan="x"
The first three attributes above have already been explained.The width and height attributes accept values in pixels. colspan and rowspan will be explained below.
Let's take a look at an example of a typical use of some of these attributes.
This Data Cell 1 is pretty and pink |
Data Cell 2 is pink too! | Lets add |
Data Cell 4 is plain | This Data Cell #5 is blue and has lots of info in it |
The 6th Data Cell is aligned to the right |
Notice that all of Row 1 is pink and Data 5 is blue.
Data 1 is align="center". Data 2 is valign="top". Data 3 is align="left".
The code should look like this:
<table border="1">
<tr bgcolor="#FF9999">
<td align="center">
This Data Cell 1 <br />
is pretty and pink</td>
<td align="right" valign="top">
Data Cell 2 is pink too!
</td>
<td align="left">
Lets add <br />
one more <br />
that is pink <br />
- It is Data Cell 3 . . .
</td>
</tr>
<tr>
<td valign="bottom">
Data Cell 4 is plain
</td>
<td bgcolor="#9999FF">
This Data Cell #5 is blue
<br />
and has lots of info in it
</td>
<td align="right">
The 6th Data <br />
Cell is <br />
aligned to <br />
the right </td>
</tr>
</table>
I left a space between the code of the rows so it is easier for me to see each section.
Write your code neatly - it makes it simpler to find errors!
Now lets have some fun with the last two attributes, colspan and rowspan.
You can modify a table so that one data cell runs all the way across the width of two or more cells. You do this by adding the colspan attribute to the <td>
tag, and assigning a number depending on how many columns you want to span.
Data Cell 1 : colspan="2" | |
Data Cell 2 | Data Cell 3 |
The code looks like this:
<table border="1">
Data Cell 1 : colspan="2"
<tr>
<td colspan="2"></td>
Data Cell 2
</tr>
<tr>
<td></td>
Data Cell 3
<td></td>
</tr>
</table>
You can also span rows vertically, using the rowspan attribute.
Add the rowspan attribute to the <tr>
tag and assign a number
value depending on how many rows you want to span:
Data Cell 1 rowspan="3" |
Data Cell 2 |
Data Cell 3 | |
Data Cell 4 |
The code should look like this:
<table border="1">
Data Cell 1
<tr>
<td rowspan="3"><br />
rowspan="3" </td>
Data Cell 2
<td></td>
Data Cell 3
</tr>
<tr>
<td></td>
Data Cell 4
</tr>
<tr>
<td></td>
</tr>
</table>
Just remember: rows run horizontally and columns run vertically.
You must have enough data cells in the non-spanned row or column to equal the value
in the span attribute.
If you have a colspan="3" then the next row must have 3 data cells in it. Otherwise your table gets all whacked out.
Isn't | This | |
of | Kind | |
Fun???? |
Ahhhh - - Fun with tables! I must admit I love tables. A place for everything and everything in its place.
Ready for some STYLES? Go to Part D of Demo 7.
Want to review? Part B of Demo 7.
Or... Part A of Demo 7.
© Claudia Faulk. Updated 6.18