Tables

Find in-depth information about html tags at W3 Schools.

Originally developed for displaying data, tables are useful for both displaying information and formatting layout in a complex page. Tables are built with rows and columns creating individual cells. These cells can be merged across rows and columns to create more complex tables.

The code for a table includes the “table” tag, the table row tag “tr,” and the table cell tag “td.” A  simple table with two rows and two columns is displayed below:

One Two
Three Four

<table>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>

Note that in writing the HTML for this table, I have started each element on a new line and indented elements when they were contained within another. This is a format that makes it easier for us to follow what is happening in the HTML code. I usually start all new elements on a new line when I am writing web pages, and I leave blank spaces to show major divisions in content. You could write all the code for a page on one line (with word-wrap turned on) and have the page display exactly the same—you just wouldn’t be able to find anything in the HTML when you went back.

An exception to the way HTML ignores blank lines and spaces (except the single spaces between words, attributes, etc.) in the code can be found in a Web 2.0 system such as the WordPress blog we are using here. In WordPress, extra spaces entered using the “HTML” tab can result in unwanted code in your post or page. If you have difficulties like this, you can switch to the “Visual” tab to put things where you want them.

Now, we might want to put a border around this table. This style places the border around the table as a whole (note that the border style is affected by the style sheet imposed by this WordPress theme):

<table style=”border:1px solid #000000″>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>

One Two
Three Four

Here, the border is placed around the cells:

<table>
<tr>
<td style=”border:1px solid #000000″>One</td>
<td style=”border:1px solid #000000″>Two</td>
</tr>
<tr>
<td style=”border:1px solid #000000″>Three</td>
<td style=”border:1px solid #000000″>Four</td>
</tr>
</table>

One Two
Three Four

We might want to put some padding around the content so that it doesn’t push up against the border:

<table>
<tr>
<td style=”border:1px solid #000000; padding:8px”>One</td>
<td style=”border:1px solid #000000; padding:8px”>Two</td>
</tr>
<tr>
<td style=”border:1px solid #000000; padding:8px”>Three</td>
<td style=”border:1px solid #000000; padding:8px”>Four</td>
</tr>
</table>

One Two
Three Four

You might want to join two cells across rows or columns. You can do this using the rowspan and cellspan attribute:

<table>
<tr>
<td colspan=”2″ style=”border:1px solid #000000; padding:8px”>One and Two</td>
</tr>
<tr>
<td style=”border:1px solid #000000; padding:8px”>Three</td>
<td style=”border:1px solid #000000; padding:8px”>Four</td>
</tr>
</table>

One and Two
Three Four

<table>
<tr>
<td rowspan=”2″ style=”border:1px solid #000000; padding:8px”>One
and
Three</td>
<td style=”border:1px solid #000000; padding:8px”>Two</td>
</tr>
<tr>
<td style=”border:1px solid #000000; padding:8px”>Four</td>
</tr>
</table>

One
and
Three
Two
Four

Note that after you put the rowspan or colspan attribute in the code for one cell, you eliminate the cell over which you want the first cell to merge.

Use the tool below to try out some this html.

Leave a Reply