Tables

HTML provides a number of tags for creating tables of data. For example:

Here are the basic tags within the table:

• The table element specifies the entire table. In the above table, we've set its border attribute to be 1 (try changing it to 10 to see what it looks like). The border is deprecated in HTML5, and we are only using it as a quick and dirty way to see the individual cells of the table. You should instead use CSS to set the visual design of a table.
• The tr element specifies a row of a table.
• Within a tr element, you can put th and td elements. The td element specifies a cell within a row, and the th element specifies a group of cells to be a header.

Issue to Consider with Tables

• Tables are relatively complex and often look like a "tag soup". This can cause troubled for screen readers.
• The default rules for how tables re-size themselves are different as compared to other HTML elements. Tables size themselves to fit their content, and so it takes extra effort if you want a table to be of a particular size (e.g. to fit with the layout of the rest of your page). For example, if you delete the last row of the table the whole table will re-size itself.
• Tables can be used to control the layout of a web page. In the early days of the web, before CSS existed, tables were pretty much the only way to make sophisticated page layouts. However, nowadays CSS is better in almost every way, and so you should not use tables for page layout.
• The HTML source for most tables is quite complex: all the tags, plus necessary styles, makes tables tedious and difficult to design by hand. For more complicated tables, it is usually best to use an editor that provides support for creating and modifying tables.

Sample Table: Dogs

Here is a copy of a sample table about dogs:

A few things to notice:

• This table does not look like the table as it appears on its original page because we are not using any CSS styling here. So the table above used the default style for all the tags. Clearly, the defaults don't look great, and in practice it is pretty much always necessary to use CSS with tables.
• From looking at the source, it is tricky to see if, say, all the rows have the same number of cells. If you wanted to make all the text in the third bold, then you'd need to be careful to ensure you are at the third td element of each row.
• Try deleting (or commenting-out) a td element to see what happens. The rows will have a different number of cells, and so the right edge will look "ragged".
• The cells in the first row all use the td element. If you replace those with the th element then that first row will stand out: it will be bold and centered within the cell.

Spanning Multiple Rows and Columns

In more complex tables, it is common to have rows that span multiple columns, and columns that span multiple rows. This can be down using the rowspan and colspanelements as in this table:

rowspan and colspan can be used to make some very complex tables, and it can take some trial-and-error to get things just right. Try changing the attributes in the above table to see what can be done.

Styling Columns

Setting styles for individual columns of a table can be tricky because you must set the style for the apporpriate cell of every column. To make this easier, HTML provides the col and colgroup elements. These are put at the top of a table before any rows. For example, the first column of this table is given a yellow background using col and colgroup:

Change the order of the two col elements if you want the second column to be the yellow one.

Captions

The caption element assigns a caption for table, e.g.:

More Structure for tables

The thead element is a table element that specifies the head element of a table. The is usually the first row, or the first few rows, of the table. For example:

In the thead element of this table the td tag was used (and not the th tag). So thead has no default visual style, which means here we are using it to clarify the structure of our table.

In addition to thead, there is also the tbody element and the tfoot element. The tbody element specifies the main body of the table, and tfoot specifies the footer. Here's an example that shows the use of all three elements:

Again, visually, the thead, tbody, and tfoot don't do anything. They are, by default, semantic elements that give the table more structure. This structure is useful when designing tables, and may also be useful to web browsers, or special tools like screen readers.

Nested Tables

You can, if need be, nest tables within tables. This quickly gets complicated, and so it is generally not a good idea unless there is a very clear reason why you want to do it.

As an example, here are two of the previous tables nested inside another table:

The outer table consists of 1 row and 2 columns, and so has no border. Thus it makes the two other tables appear side-by-side.

Again, this probably not a wise idea! If you actually want two tables to appear side-by-side like this, then it is probably better to position them with CSS instead of a table (since CSS is far more flexible). Or, in some cases, it might make sense to structure this as one big table.

Editor Support for HTML

Modern programming editors, such as a Sublime 3, can provide a lot of helpful tools and tricks for writing HTML (and CSS, and JavaScript.

Here's one trick that you can use in Sublime 3 in its HTML mode: type an element name like code ( without any angle brackets), and then press TAB. It will expand into a matching opening/closing take for code.

Prettifying HTML (and CSS and JavaScript)

There are also various useful plugins you can install for helping with HTML. For example, the HTML-CSS-JS-prettify package will automatically re-format your HTML (or CSS, or JavaScript) to look "pretty". This usually means that it will change line breaks and indentation into a standard format. To install HTML-CSS-JS-prettify in Sublime 3, do the following:

• Type ctrl-shift-P, then select "Package Control: Install package"
• Select the HTML-CSS-JS-prettify package from the list. A quick way to do this is to type prettify. After selecting the package, it should be automatically downloaded and installed.

After installing HTML-CSS-JS-prettify, you can now "prettify your HTML by right-clicking with the mouse, selecting HTML/CSS/JS Prettify, and then selecting Prettify Code.

Emmet: Shortcuts on Steroids

If you are writing a lot of HTML by hand, then you might want to install the Emmet package as follows:

• In Sublime, type ctrl-shift-P, then "install", and select "Package Control: Install Package".
• Type "emmet", and then select the Emmet package. This should download and install it for you.
• Re-start Sublime to finish the installation.

With Emmet installed, there are now many more shortcuts for quickly creating HTML and CSS. For example, if you type "ul" and then press TAB (or ctrl-E), it should automatically expand into an unordered list structure. It is much faster than type all the tags and angle-brackets by hand.

The Emmet cheat sheet lists many other abbreviations and shortcuts you can use to quickly create HTML on the fly. This may seem like a lot to learn --- and it is! But you are writing a lot of HTML by hand, then learning these shortcuts can save you time overall.