ETSU Logo

CSCI 1210

Essentials of Web Development

Homework 4: Tables

Setup

  1. Download the HW4 starter file archive (hw4.zip) and save it to your external drive in your homework folder
  2. Extract the files to your folder. You should have hw4template.html and two folders: css and images. I'm providing a stylesheet with this assignment (hw4.css), which will dress the output up a little
  3. Open hw4template.html in Notepad++ (NPP)
  4. Update the information in the <head> element
  5. starting hw4
    Fig. 1- Update meta-info
  6. Save your file as hw4.html. Add your name and the date where the comments prompt you

You can use the screen shot below to get the content you'll be adding to the first table


first table
Fig. 2- Your first table will look like this

Constructing the table

  1. Add the first row to the table. This is where the column headings will be, so you'll use the <th> element instead of the <td> elements
first row
Fig. 3- Your table's first row
  1. Now, set up your table's second row. Remember, the rest of the table is going to be structured the same, so you only have to type it out once
data rows
Fig. 4- Your table's rows
  1. Highlight the first row as shown in Figure 5. Make sure the blank line is below the last cell and tabbed in as shown
duplicating data rows
Fig. 5- Highlighting the rows
  1. You can see from Figure 2 that there are a total of six rows in the table. So press Ctrl+d five times to duplicate the code
duplicating data rows
Fig. 6- Duplicating the rows
  1. Now we can start filling in the data for the table. Referring to Figure 2, fill in the cells for your table
entering data entering data
Fig. 7- Entering data
  1. Save your work and launch the page in Chrome

    Run→Launch in Chrome or View→View Current File In→Chrome

entering data
Fig. 8- First Table

Second Table

  1. You might want to take a break for a few minutes ... the second table is a little more complex
table 2 schematic
Fig. 9- Second Table
  1. Using the schematic above, creating the second table should be relatively straightforward (I hope)

I know the picture looks a bit busy - but we'll use the same technique here, type out the first row(s), then use Ctrl+d to duplicate them. Then, all that's left is filling in the data to get:


table 2
Fig. 10- Second Table
  1. You may have noticed that the first cell of each row (actually, pair of rows) contains an image. No problem, as we'll see

Notice that the second table has an id, prod. I'll explain later, but it lets us style the table independent of the other one


  1. Once again, we'll start with the column headings row and the first rows (which will be repeated for the remainder of the table)
table 2 column headings
Fig. 11- Second Table First Row
  1. Once again, insert a blank line after the </tr> tag and the </table> tag and tab in. Highlight the rows as shown below:
table 2 column headings
Fig. 12- Highlighting the row
  1. So, referring back to Figure 10, we see that there are a total of seven rows (fourteen, actually -- but we're using them in pairs.) So, seven. And we've done the first and highlighted it. Now, press Ctrl+d six times to complete the table's structure
building the rest of the table
Fig. 13- Building the rest of the table
  1. Referring to Figure 10, enter the information for each row...I'll start you off with the first:
building the rest of the table
Fig. 14- First Row
  1. Again, I'm constrained by the fact that the table is now kind of big, so here's the last row. Hopefully, you get the point
building the rest of the table
Fig. 15- Last Row
  1. Once you have finished the table, save your work, return to Chrome and refresh the page. It should look like Figure 10
  1. Fix any errors you may have and save your work
  1. Once your work is error free, log into your account with FileZilla. Navigate to your external drive homework/hw4 folder on the left
  1. On the right, double-click on the homework folder. Drag and drop your hw4 folder to the homework folder on the right
  1. Return to Chrome. Enter the URL for your homework in the address bar. Again it is

    your_id.csci1210.com/homework/hw4/hw4.html.
    For example, mine would be

    ramseyjw.csci1210.com/homework/hw4/hw4.html
  1. Ctrl-click both validation icons and check for errors
  1. If you have any errors, fix them, save your work, and upload it again
  1. Once your work is error-free, copy the URL into a new text file. Save the file as hw4.txt and upload it to the D2L HW4 folder
  1. Before we wrap this up this up, open the css/hw4.css file in NPP. Take a look at the CSS code and see if it doesn't make a little sense. Even though the syntax is different, it should be pretty evident what it is doing

Have a nice day!