Incarnadine



 info/how to:


 multimedia:

 facs 1939
 facs 2930
 general






Working with Tables (Table Lesson 3)
by Nadine Wettlaufer

a version of this page for printing out

Topics:



Use Paper and Pencil:    back to top

When trying to figure out how to make tables, draw little sketches of the tables for yourself on paper. Redraw the table several times as you consider whether you have taken everything into account.

Continue to refer to your sketches as you work on your table, and you may even need to make a larger, neater and more exact drawing of your table to help you do your table layouts in an exact way.


Figuring out COLSPAN:    back to top

When trying to figure out how to make tables that may need colspan, you need to ask yourself these questions, and make written notes about the answers:

1) How many rows are in the table? (count them)

2) Then you need to ask yourself these questions about each row:
  • how many columns in this row? (count them)

  • comparing this row to other rows (and their columns), does this row look like colspan occurs inside it?

  • if so, in which column will the colspan occur?

  • if so, across how many columns does the colspan column stretch?

Remember, when you are identifying rows and columns, you count in English-language order, which means, start at the left, and go towards the right; start at the top and go towards the bottom.

Notice that colspan always expands from the left to the right. Where you have to define it is the left-most part of the intended colspan column, and it will then span across columns towards the right.

Remember, each row in a table must have the same number of columns or equivalent (the equivalent would involve using an appropriate colspan setting, for instance, colspan="2").


A Colspan table:

Here's a table where:

- the 1st row has 4 columns
- the 2nd row has 3 columns

<table border="5">
<tr>
<td>1</td>
<td>two</td>
<td>3</td>
<td>four</td>
</tr>

<tr>
<td colspan="2">one</td>
<td>two</td>
<td>three</td>
</tr>

</table>
1 two 3 four
one two three




Next Colspan table:    back to top

Here is the sketch of the table you need to make:


Here are the questions (from further above) about this table, and the answers:
How many rows: 3

Row 1: 
how many columns: 3 cols
Colspan? - no

Row 2: 
how many columns: 2 cols
Colspan? yes
where will colspan go? in col 2
                  spanning 2 columns

Row 3: 
how many columns: 1 col
Colspan? - yes
where will colspan go? in col 1
                  spanning 3 columns
Here's the HTML to make the above table:

<table border="5">
<tr>
<td>col 1</td>
<td>col two</td>
<td>col 3</td>
</tr>

<tr>
<td>col 1</td>
<td colspan="2">colspan is here</td>
</tr>

<tr>
<td colspan="3">colspan is here</td>
</tr>

</table>

And here's the table that results:

col 1 col two col 3
col 1 colspan is here
colspan is here



A Final Colspan table:    back to top

Here is the sketch of the table you need to make:


Here are the questions (from further above) about this table, and the answers:
How many rows: 3

Row 1: 
how many columns: 2 cols
Colspan? - yes
where will colspan go? in col 1
                  spanning 2 columns

Row 2: 
how many columns: 3 cols
Colspan? no

Row 3: 
how many columns: 2 cols
Colspan? - yes
where will colspan go? in col 1
                  spanning 2 columns
Here's the HTML to make the above table:

<table border="5">
<tr>
<td colspan="2"> this</td>
<td> is </td>
</tr>

<tr>
<td> a </td>
<td> long</td>
<td> and </td>
</tr>

<tr>
<td colspan="2"> awkward</td>
<td> line </td>
</tr>
</table>

And here's the table that results:
this is
a long and
awkward line



Figuring out ROWSPAN:    back to top

Like with COLSPAN, when trying to figure out how to make tables that may need ROWSPAN, you need to ask yourself these questions, and make written notes about the answers:

1) How many rows are in the table? (count them)

2) For each row, ask yourself (and note):
  • how many columns in this row? (count them)

  • COLSPAN:
    1. comparing this row to other rows (and their columns), does this row look like colspan occurs inside it?

    2. if so, in which column will the colspan occur?

    3. if so, across how many columns does the colspan column stretch?

  • ROWSPAN:
    1. looking at this row, does this row have rowspan occuring inside it?

    2. if so, is this the highest row that includes this instance of rowspan? If so, define rowspan in this row.

    3. if there is rowspan, in which column does the rowspan occur?

    4. if there is rowspan, across how many rows does the rowspan stretch?

Remember, when you are identifying rows and columns, you count in English-language order, which means start at the left and go towards the right, and start at the top and go towards the bottom.


The trick with rowspan:    back to top

Notice that rowspan always expands from the top to the bottom. Where you have to define it in the table is the top-most part of the rowspanning area. From there it spans down across other rows.

This is important for how it affects the rule that each row in a table must have the same number of columns or equivalent.

If there is a cell that spans 2 rows, it is rowspan="2". This rowspanned column counts towards the number of columns in both of the rows involved. BUT, the rowspanned cell is only defined in the top row, and nothing is present in the second row to indicate that the rowspanned cell also counts towards the second row's total number of columns or equivalent.

This means that all the rows involved in a rowspan, except the top one, will APPEAR to be missing one column or equivalent in the HTML code. But the rowspan setting (in the top row) serves as a reminder of how many rows total have that column counting towards the total number of columns in the row.


Rowspan Example:    back to top

Here is the sketch of the table you need to make:


Here are the questions (from above) about this table, and the answers:
How many rows: 3

Row 1: 
how many columns: 3
Colspan? no
Rowspan? yes
is this the highest row for this rowspan? yes, 
        therefore define rowspan in this row
in which column is the rowspan ? col 2
How many rows does it span across in total?: 3 

Row 2: 
how many columns: 3
Colspan? no
is this the highest row for this rowspan? no
in which column is the rowspan ? col 2
How many rows does it span across in total?: 3 

Row 3: 
how many columns: 3
Colspan? no
is this the highest row for this rowspan? no
in which column is the rowspan ? col 2
How many rows does it span across in total?: 3 

Because rowspan expands from the top down, 
and it is including row 1 here, the
rowspan declaration must go WHERE? 
 - in row 1, and ONLY in row 1 (it will expand
 down from there).
 
How many rows does it span across in total?: 3 
Therefore:  rowspan = "3"  goes in row 1, column 2

Here's the HTML to make the above table:

<table border="5">

<tr>
<td> a </td>
<td rowspan="3"> alphabet </td>
<td> b </td>
</tr>

<tr>
<td> c </td>
<!-- the rowspan column from row 1 reaches here -->
<td> d </td>
</tr>

<tr>
<td> e </td>
<!-- the rowspan column from row 1 reaches here -->
<td> f </td>
</tr>

</table>

And here's the table that results:
a alphabet b
c d
e f





End of Working with Tables, Lesson 3   

Lesson 1 and Lesson 2 explain about tables.



back to top