<< .. Go to : : Home : : Exercise 7 : : Demo 7A : : Demo 7B : : Demo 7C : : Demo 7D : : Demo 7E : : TAGS : : All Class Demos .. >>

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
    one more
    that is pink
    - It is Data Cell 3 . . .

    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">
<tr>
<td colspan="2">
Data Cell 1 : colspan="2" </td>
</tr>
<tr>
<td>
Data Cell 2 </td>
<td>
Data Cell 3 </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">
<tr>
<td rowspan="3">
Data Cell 1 <br />rowspan="3" </td>
<td>
Data Cell 2 </td>
</tr>
<tr>
<td>
Data Cell 3 </td>
</tr>
<tr>
<td>
Data Cell 4 </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.

Go to the Exercise 7 page.

© Claudia Faulk. Updated 6.18