Organizing information

As stated, HTML is basically a way of organizing informational content, and as such provides a few helper tags to do that. Two of the primary tags are sets of types to create and define lists and tables.

Lists

The strength of using native list code within HTML is that the numbering and/or bullet points are automatically applied.

<ol>

Defines an *ordered* list. During viewing your browser will automatically generate a number for each entry in the list.

<ul>

Defines an *unordered* list. Typically lists of this type are drawn on screen with simple bullet points instead of nubmers.

<li>

The actual list entry. This tag should be used for each point in the list and resides within either "ol" or "ul".

Let's look at some code for lists on the left and their result on the right. Note how the main difference is just the use of "ol" and "ul".



<h3> Fruits! </h3>

<ol>
	<li> Apple </li>
	<li> Carrot </li>
	<li> Orange </li>
	<li> Plum </li>
	<li> Watermelon </li>
</ol>

<h3> Dogs! </h3>

<ul>
	<li> Chow Chow </li>
	<li> Dachshund </li>
	<li> German Shepherd </li>
	<li> Pit Bull </li>
	<li> Whippet </li>
</ul>

<h3> Mixed lists! </h3>

<ol>
<li> Apple Chow </li>
	<ul>
		<li> Long hair </li>
		<li> Stubby nose </li>
		<li> Can get worms </li>
	</ul>
<li> Bull Plum </li>
	<ul>
		<li> Small </li>		
		<li> Purple </li>
		<li> Careful of pit </li>
	</ul>
<li> Orange Whippet </li>
	<ul>
		<li> Thin </li>
		<li> Contains vitamin C </li>
		<li> Orange you glad I didn't Whippet </li>
	</ul>
</ol>

Fruits!

  1. Apple
  2. Carrot
  3. Orange
  4. Plum
  5. Watermelon

Dogs!

  • Chow Chow
  • Dachshund
  • German Shepherd
  • Pit Bull
  • Whippet

Mixed lists!

  1. Apple Chow
    • Long hair
    • Stubby nose
    • Can get worms
  2. Bull Plum
    • Small
    • Purple
    • Careful of pit
  3. Orange Whippet
    • Thin
    • Contains vitamin C
    • Orange you glad I didn't Whippet

It is possible to change the visual styling of your lists just like any element on your page - this will be discussed in the later section on CSS Text Styling.

Tables

Tables within HTML have been in a state of limbo for a while. They were initially concieved as a way to hold tabular data but it wasn't long before web designers started using them for stylistic purposes as well. For instance wrapping an object in a table was a quick and easy way to center an entire element.

Relevence

Pros:

  • Old enough for widespread compatibility, minimum difference between browsers.
  • Easy way to define alignment for individual elements (especially since vertical-align: center doesn’t exist).
  • Will define rows and columns with exact number of cells without worry of them moving above or below their neighbor.

Cons:

  • Even though it appears as a tag, tables are a stylistic element. They can define size and position on their own outside your CSS.
  • Little that can’t be duplicated with CSS, which wouldn’t include the default drawing style.
  • If you don’t restyle, table the default lines are quite nostalgic looking, and not always in the good way.

Table related tags

There are several layers to defining a table.

<table>

Defines the table start

<tr>

Table row

<th>

Table header for top and side cells (optional).

<td>

Actual table data, an individual cell.

Many older examples will reference styles like “width” or border” within the element itself. Each of these tags can be used as normal with CSS so those properties are best defined there. The only attribute that will remain acceptable for the immediate future is “align”. Though technically deprecated (older code whose use is discouraged in place of something newer and/or better) it still remains, and when used with tables is the easiest way to align an element to the screen center.

Note that you don’t really have a choice to define columns first, then rows, you will always define your information rows first.

Here is a simple implementation.



<table style="text-align:center;" width="200" border="1">
  <tr>
    <td></td>
	<th>A</th>
	<th>a</th>
  </tr>
  <tr>
  	<th>A</th>
    <td>AA</td>
    <td>Aa</td>
  </tr>
  <tr>
    <th>a</th>
    <td>Aa</td></td>
    <td >aa</td>
  </tr>
</table>

The result of the code to the left is fairly straight forward. Here we've made a simple punnett square with basic "th" tags for the top and side labels and "td" tags for the resulting cells. Pay close attention to where each appears in the code.

Notice how the first cell of the first row is left empty so that a blank space will appear in the upper left corner of the table where we don't want a label or result.

A a
A AA Aa
a Aa aa

Now let's look at a more complex implementation, with some extra attributes within the table header and data tags themselves to customize the table even more.



<table style="text-align:center;" border="1">
    <tr>
    	<th colspan="5">1</th>
    </tr>
    <tr>
        <td rowspan="3">2</th>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td rowspan="2">8</td>
        <td >9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>  
</table>

Now here is the product of the code to the left:

1
2 3 4 5 6
7 8 9
10 11 12

There are a few things to notice about this table.

  • The header (cell 1) extends across the entire table via "colspan" having a value that matches the same number of columns in the table. If we were to enter any number "x" for "colspan" then the header would only stretch across "x" columns.
  • The first use of "rowspan" (cell 2) goes from the header to the bottom of the table just by having a value of "3", the same number of rows under the header.
  • The second use of "rowspan" (cell 8) shows that if a data cell from one row descends into the next row, the row below will simply continue after the occupied cell space.
  • There is an empty space in the third row, 5th column, simply because there is no 4th "td" tag within that row.

Misc. tags

While not necessarily required knowledge, don’t be surprised if you ever see these tags used in web pages. Today they mostly exist so you can reference the elements in your CSS.

<caption>

A caption for a tables, appears as text above the table. (goes inside table tag)

<colgroup>

Groups columns in a table for formatting. (goes inside table tags)

<col>

References individual columns. (inside colgroup).

<thead>

Defines a group of headers. (around tr)

<tbody>

Defines body content. (around tr)

<tfoot>

Defines footer content. (around tr)