HTML PRIMER

by Jim Gordley
2008-2016

Spanning Columns and Rows

Cells in a table can be expanded to span across colums or rows. There are countless times when this is a useful design technique, most common would be to group colums or rows together under a common heading.

COLSPAN and ROWSPAN ATTRIBUTES

Controlling the span of cells provides the tools needed for customizing table layout. The attributes <colspan> and <rowspan> are used in the <th> and <td> elements they have no effect if used in the <table> or <tr> elements.

Spanning Columns

The attribute colspan is used to span over columns. An intiger is given as the value. For example spanning two coloumns is done by using 2 as the value. See the diagram below.

Spanning Rows

The attribute rowspan is used to span over rows. An intiger is given as the value. For example spanning two coloumns is done by using 2 as the value. See the example below.

CLASS LAB
SPANNING COLUMNS
DO THIS WHY YOU DID IT
  1. Open the folder on your thumb drive labled UNIT 2. Using Open as Open the products.html file with Notepad and again with Firefox.

  2. In the browser window, take a look at the first row. Observe the empty cell.


  3. In the products.html Notepad add the following highlighted code


  4. <th colspan="2"> spices by the pound</th>

  5. In the Notepad products.html file use your mouse and highlight (select) the second column in the first row of the table.
    <th>&nbsp;</th>
    With the text selected press the delete key.


  6. Save the changes and check the results.
So the products.html file can be edited, and the changes can be viewed in the browser.




To see the empty cell in the first row of the table



To edit the HTML code of the products.html file.


To change the layout of the table heding.


To select text




To delete the cell that is no longer needed.




CLASS LAB
SPANNING ROWS
DO THIS WHY YOU DID IT
  1. On the task bar select the products.html file.
    Scroll down towards the bottom and locate the SPECIALS comment

    <!-- SPECIALS -->

  2. Locate in the tables first row. Between the first <tr> and the <td...> elements add the following highlighted code.

    <th rowspan="3">Specials</th>

  3. Save the change and refresh the browser page to check your work.
So you can edit the products.html file.







To add a header column that spans all three rows.

 

Table with 5 rows and 4 coloumns
0 1 2 3 4
1 I'm on the first row I span all four columns. colspan="4"
2 I span two rows
rowspan="2"
I am on the second row
My background is light blue
I am on the second row
My background is green
I span 3 center rows.
3 I'm on the third row but I span two columns
colspan="2"
4 I span the first 2 columns
and bottom 2 rows.
I am a lonely cell
5 I am the row on the bottom

Looking at the example above you can see that cells can span columns and rows in any arrangement. Keeping the cells balanced is important when using a layout that spans.

Table and Cell Color

The example above demonstrates that cells can be designed to have independent color attributes. By default all cells will have the same background color as thier parent element <table> In the table above a background color attribute of purple has been assigned. The only cell in the table that was not assigned a background color is in the fourth row third column. (I am a lonely cell)

Use CSS to assign color backgrounds in you tables. Instead of editing every HTML attribute:
             <td bgcolor="lightblue">
for each cell throughout all the HTML code it is much faster and efficient to use a CSS class id. Using CSS you can change the entire web site by editing one CSS file.

.headcell {background-color:#ff9933;}
<th class="headcell">

CLASS LAB
ADDING BACKGROUND COLOR TO CELLS
DO THIS WHY YOU DID IT
  1. On the task bar open the products.html Notepad.

    In the <head> section find the <style> element. Just under that add the following highlighted CSS declarartion.

    .sales {background-color:#EEEEEE;}
    .specials {background-color:#AFCAAF;}


  2. Scoll down to the <!-- SPECIALS --> comment. Add the following highlighted code to the <table> element.

    <table class="sales" border="1" cellspacing="0" cellpadding="6">

    Save the change and check your work.

  3. On the task bar select the products.html Notepad. Locate the <!-- SPECIALS --> comment. In the <table> element locate the first <th> element and add the following highlighted code.

    <th class="specials" rowspan="3" bgcolor="#afcaaf">Specials</th>

  4. Save the change and check your work.
To edit the products.html file.



To add style declarations.










Adds a class attribute that changes the background color of the entire table to light gray.
 




Adds a class attribute that changes the background color of the <th> to pale green.
 
Specials Fresh Rosemary $ .99/oz.
Fresh Sage $2.49/oz.
Paprika $ .59/oz.

Your specials table should look like the table above.

  1. Close all open files

Table Captions

A table caption will appear centered above the table. Use the table caption to describe the content of your table. An example of a table caption would be Monthly Budget or High Scores

EXAMPLE

<table>
<caption>My Monthly Budget</caption>
<tr>...etc...

Class Lab
Creating Table Captions
DO THIS WHY YOU DID IT
  1. From the Unit 2 folder open the spiceinfo.html file in Firefox and Notepad

  2. Scroll down until you see the SPICE INFO comment.

  3. Between the opening table tag and first tr tag add the opening caption tag followed by the closing caption tag. Place the cursor between the two and type the text of your caption.

    <caption>|</caption>

  4. Save your work then refresh the browser page to verify.

  5. Close all open files.
SO the file can be viewed and edited.






To add a caption to the table.
Forms