Current Assignments:
> HW-02

Due:
Mon Oct 02 @ 11:55PM
Previous module:
Next module:

Tables:

Tables are used to represent relationships and complex data, such as scores and stats, money markets, databases, etc.

For your Project 2, you’re going to use a table to break up the directions of your Instructable. Although your inclusions may be less-complex than statistical data, we can use tables to break up information groups (step number, step details, step image, ect.) before we get into CSS.

Basic Table Structure

The Table Element

We declare a table using the <table>...</table> element. All the content of that table lives within those tags.

Rows

Table rows are created using the <tr>...</tr> element. Inside of a <tr> lives the individual cells (equal to the number of columns), each referenced using a set of <td> tags.

Cells

Cells contain table data, which is represented using a <td>...</td> element.

Headings

You should always use table headings or <th> elements to provide structure and style to head your columns and rows. This is incredibly helpful for people who use screen readers, and helps search engines to correctly index your page.

NOTE: Empty cells are not forgotten cells - they still need to be created using <th> or <td> elements. Not including these elements will cause your table to improperly render.

We delineate columns and rows using the scope="" attribute; a column is headed using <th scope="col">...</th> and a row is headed using <th scope="row">...</th>

Spanning

Sometimes an entry stretches across one or more columns or rows. We can merge cells with their neighboring columns or rows by using the colspan="" and rowspan="" attributes respectively.

To learn more about spanning, please see the detailed examples in Ducket, pages 133-134.

Table Styling

We can also add visual interest to tables to help with easier reading and showcasing of data.

Did you know you can style things other than the overall page in the document’s <head> element? Just as you did in the last Topic, add a <style>...</style> element, but this time we’re going to reference tables specifically.

We can reference the individual elements of the table as a group for easier styling. We do this by separating the elements by commas in the same line of code. Everything in this string will be affected by the styling described between {}.

NOTE: Ideally, this is something you’ll do in a stylesheet when we get to CSS.

HTML
<style>
    table, th, td {
      border: 1px solid black;
    }
</style>

In this example, the table outline, heading coloums and rows, and cells will all be given a border.

Borders

By default, a table is rendered without borders.

A border="" attribute is broken-up into 3 componets: width, style, and color. We will get more into borders with CSS, so for now, this is the basic border styling for tables. In the example above, the code effectively states “a border 1 pixel wide, solid line, in black.”

If you want only one line between your cells, you can use the border-collapse property.

Cell Padding

You may wish to “cushion” your cell contents from their borders. We do this using the padding="" property. Generally, we measure this padding in pixels and again, this is something we’d normally do in CSS.

Other

For other styling options, visit table styling on W3Schools.com.

Altogether Now

{ TODO: }

  1. Read pages 126-141 of Chapter 06 in Duckett.
  2. Experiment with table styling on W3Schools.com.
Previous section:
Next section: