Page Banner

Lesson Practice 2-3:
Adding Structure with Tables


Task 1: Create a simple table with column headings

    1. Open your template.htm in notepad++.
    2. In the title element, add the title: Create a Simple Table
    3. Add an h1 element using the same text as in the title element.

    4. Add a table structure:
      1. On the line after the opening body tag, key the following, including the indents:
        <table>
        		    
          <tr>  
            <td>Row1 Col 1</td>
            <td>Row1 Col 2</td>
            <td>Row1 Col 3</td>
          </tr>  
          <tr>  
            <td>Row2 Col 1</td>
            <td>Row2 Col 2</td>
            <td>Row2 Col 3</td>
          </tr>  
          <tr>  
            <td>Row3 Col 1</td>
            <td>Row3 Col 2</td>
            <td>Row3 Col 3</td>
          </tr>  
        </table>
        		   

      2. Save in the Tables folder using the filename table1.htm then view in browser.
      3. Examine the table and the code, so you understand how the code for each row and cell works.
        It is good practice to have each cell on a separate line, so the rows of code do not get so long and difficult to follow.

    5. Add a table heading row:
      1. Add five blank lines between the opening table tag and the first opening row tag.
      2. To create column heading row, key the following into the blank lines:
          < tr>  
            <th>Col 1</th>
          <th>Col 2</th>
            <th>Col 3</th>
          </tr>  
      3. Save again and view the result in the browser.


Task 2: Add a Border and Color

You will add some color and definition to this table using attributes, for now. Later you will change the formatting to use CSS styling.
  1. Open table1.htm in notepad++. Immediately save as table2.htm
  2. In the title element, change the title to: Adding Borders, Background Color and Sizing
  3. Change the text in the h1 element also.

  4. Add border and color:
    1. Add the border=" " attribute in the opening table tag, setting the border to 3 pixels. Save and preview.
    2. Change the border to 10 pixels. Save again and view. Experiment as you wish, and leave the border at either setting as you like.
    3. Add the bgcolor=" " attribute to the opening table tag, using the value gray.
    4. Add the bgcolor attribute to the opening row tag of the header row, using the value teal.

  5. Adjust table and cell sizes:
    1. Add height and width attributes to the opening table tag, setting them both to 200 pixels. View the page.
      Note that the headings are automatically centered, and cell contents are automatically at the left of each cell and vertically centered.
      Also, the height attribute may not distribute the rows evenly.
    2. To distribute the rows evenly, the first cell in each row must be given the same height. In the first opening header tag, add a height attribute set to 50.
    3. Add the same attribute and value to the opening <td> tag for the first cell in each row.
    4. Save and preview. The rows should be equal height now.


Exercise 3 – Column and Row Spanning

  1. Open table2.htm, if necessary, and immediately save as table3.htm
  2. In the title element, change the title to: Column and Row Spans
  3. Change the text in the h1 element also.
  4. Remove the cell spacing attribute from the table element. Save and view.

  5. Add a merged title row:
    1. Add a row between the opening table tag and the header row. Add one cell to this row. Between the <td> tags, add the text: How to Expand Rows and Columns. Save and view.
    2. To make this single cell go across the table, you must ‘span' the columns. In the opening tag of this cell, add the colspan=" " attribute with the value of 3. Save and view.

  6. Span rows and columns:
    1. Delete the entire first cell in the middle regular row (Row2 Col1).
    2. To the first cell in the first regular row (Row1 Col1), add the rowspan=" " attribute, set to 2. Save and view.
    3. Delete the entire last cell in the last row (Row3 Col3). (Keep the closing row tag.)
    4. To the opening tag of what is how the last cell (Row3 Col2), add the colspan attribute, set to 2. Save and view. The file should now appear similar to the illustration below.
      How to Expand Rows and Columns
      Col 1 Col 2 Col 3
      Row1 Col1 Row1 Col2 Row1 Col3
      Row2 Col2 Row2 Col3
      Row 3 Col1 Row 3 Col 2


Task 4: Add Table File-links to your Home Page

  1. Open your file index.htm.
  2. In the Table Pages section, add three paragraph elements.
  3. Link to one of the table files in each paragrah element, using the page title for the link text.
  4. Add the title=" " attribute to each, using the filename of the page.
  5. Save and preview, testing the links, and making any adjustments needed.

  6. Publish your new files, as well as your updated index file to your folder of the class Share file.
  7. Open the index file in the new location and test your links.

 

bonom bar