teaching machines

CS 318: Lab 16 – Tables

April 2, 2018 by . Filed under cs318, lectures, spring 2018.

Dear students,

Today we explore the HTML table element. At its core, a table is just a grid of rows and columns. It supports headers, borders, and cells that extend across multiple columns and multiple rows.

Before div and CSS positioning came along, tables were the primary vehicle for structuring a page. It was awful. The W3C stated this in the HTML5 specification:

Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout—making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.

These days most professional web designers say that tables should only be used for grids of data. If you want to present a sphreadsheet-like listing of content, then tables are your vehicle.

Let’s introduce tables with two examples, one simple and one more complicated. Here’s the simple one:

And the wilder one:

We’ll build up the HTML for each. In the end we should arrive at something like this for the simple table:

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
  <style>
td {
  border: 1px solid black;
  width: 5em;
}
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th># Tattoos</th>
      <th>GPA</th>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
  </table>
</body>
</html>

And this for the more complex table:

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
  <style>
td {
  border: 1px solid black;
  width: 5em;
}
  </style>
</head>
<body>
  <table>
    <tr>
      <td rowspan="2">A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td colspan="2">D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
      <td>G</td>
    </tr>
  </table>
</body>
</html>

Here’s your TODO list:

See you next time!

Sincerely,

Lab

First create a lab16 directory. Add a partners.html and include your first names and last initials.

Bingo Card

Create in bingo.html a table displaying a bingo card with numbers of your choosing. Bingo cards have 6 rows. The top row holders the headers B-I-N-G-O. The B columns holds five numbers 1-15, the I column holds five numbers in 16-30, and so on.

Your page should like something like this when rendered:

Schedule

Create in schedule.html a table displaying one of your weekly schedules (or make one up). Each row represents an hour. (Not every event will align nicely. Round to the nearest hour.) Place your routine activities like classes, work, yoga, bingo night, student organization meetings, and so on in the table. If an activity takes more than an hour, extends its cell the appropriate number of rows. If an activity occurs on multiple contiguous days (like lunch everyday at noon), extends its cell the appropriate number of columns. Label the rows and columns.

Do Something Interesting

Create in custom.html a tabular display of some data of your choosing. The only criteria is…

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab16 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.