Step 15 – Tables

Last update: February 21 2019

HTML tables are used to format data. It allows you to use columns and rows, just like a spreadsheet. In the past, tables were used to create layouts of websites. Each cell would be used to show a partial image or content. Altogether, it would form a whole. Nowadays, CSS offers great functions to create layouts.

In this step, we’ll dive into:

Create table

Let’s create a table . Let’s create a new file called table.html with the following code:

<html>
<head>
<title>my first table</title>
</head>
<body>
<table>
<tr><th>Day of the week</th><th>Time</th><th>Appointment</th></tr>
<tr><td>Monday</td><td>12.30 pm</td><td>Dentist</td></tr>
<tr><td>Tuesday</td><td>8 pm</td><td>Party at Sam's</td></tr>
<tr><td>Wednesday</td><td>10.15 am</td><td>Pick up laundry</td></tr>
<tr><td>Thursday</td><td>4 pm</td><td>Deadline logo design</td></tr>
<tr><td>Friday</td><td>10 pm</td><td>Drinks with friends</td></tr>
</table>
</body>
</html>

TABLE-tag

You always open and close the TABLE-tag. So, we started ours with <table> and ended it with </table>

There are a few attributes that I haven’t used in this example, but they are described below. Nowadays, most tables are created using data taken from a back end database. A scripting- or programming languages will retrieve this data and place it in a table. So, most styling of the table usually gets done, using CSS. Nevertheless, you could style in HTML as well. However, all of the below attributes are not supported in HTML5

Border

You could add a border and set a border color:

<table border="1" bordercolor="#000000">

In the optional BORDER-attribute, you define the thickness of the table border. The given value here is the amount of pixels the border should have. In this case, it’s 1 pixel. Adding the optional BORDERCOLOR changes the default border color of grey to black.

Background color

The attribute BGCOLOR, that you know from creating the body-tag, can be used with the TABLE-tag. In this example, I’m changing the background color to white. This will count for the whole table. You can also set background colors on row and column level. Then, you would move it to the <tr> or <td> tag.

<table bgcolor="#FFFFFF">

Cellspacing and Cellpadding

<table cellspacing="0" cellpadding="0">

The optional CELLPADDING-attribute decreases or increases the padding within cells. CELLSPACING, also optional, increases or decreases the spacing between cells. Nowadays, you’ll most likely use padding and margin settings using CSS.

Width 

It’s also possible to preset the width of a table. The values are in pixels:

<table width="500">

or provide a value in percentages:

<table width="50%">

It will be using 50% of the space available. By default, this would be the screen width.

Rows and Columns

Every table needs cells, which you create by setting rows and columns.

<TR> opens a row. <TD> opens a column. So, with the following code, we created a table with one row and one column:
<table>
<tr><td></td></tr>
</table>

The <TD>-tag is always nested inside the <TR>-tag.

You can create as many rows and columns as you want, but you are restricted by the size of the screen!

In our sample file, we used more codes. This is what they were:

<tr> = table row and opens a new row
<th> = table header and opens a column. Data in it will be automatically centered and shown in bold
</th> closes the header column
<td> = table data and opens a column
</td> closes the data column
</tr> closes the table row

But there’s all sorts of things you can add and do. Let’s add another row in the table of our file:

Colspan and Rowspan

<table>
<tr><th>Day of the week</th><th>Time</th><th>Appointment</th></tr>
<tr><td>Monday</td><td>12.30 pm</td><td>Dentist</td></tr>
<tr><td>Tuesday</td><td>8 pm</td><td>Party at Sam's</td></tr>
<tr><td>Wednesday</td><td>10.15 am</td><td>Pick up laundry</td></tr>
<tr><td>Thursday</td><td>4 pm</td><td>Deadline logo design</td></tr>
<tr><td>Friday</td><td>10 pm</td><td>Drinks with friends</td></tr>
<tr><td>Saturday</td><td colspan="2">Absolutely nothing</td></tr>
</table>

Sometimes, you need to break the pattern of the table. Just like in Excel, you might need to merge a few cells. This is what COLSPAN is for. It stands for Column Span. The value you provide here, equals the amount of columns this cell is supposed to cover. In our example, this is 2 columns. It creates one cell extending itself over 2 columns.

The COLSPAN-attribute can be used in the TD and TH-tag.

You can also merge rows. For this, you use ROWSPAN and it works the exact same way, but then extending over the amount of rows you provided:
<table>
<tr><th>Day of the week</th><th>Time</th><th>Appointment</th></tr>
<tr><td>Monday</td><td>12.30 pm</td><td>Dentist</td></tr>
<tr><td>Tuesday</td><td>8 pm</td><td>Party at Sam's</td></tr>
<tr><td>Wednesday</td><td>10.15 am</td><td>Pick up laundry</td></tr>
<tr><td>Thursday</td><td>4 pm</td><td>Deadline logo design</td></tr>
<tr><td>Friday</td><td>10 pm</td><td>Drinks with friends</td></tr>
<tr><td>Saturday</td><td colspan="2" rowspan="2">Absolutely nothing</td></tr>
<tr><td>Sunday</td></tr>

</table>

Align and Valign

Note: Not supported in HTML 5. Now, you use CSS. Below is still supported in older HTML versions.

For alignment of your table’s content, you can add the ALIGN-attribute to your rows or columns.

Example:
<table>
<tr><th>Day of the week</th><th>Time</th><th>Appointment</th></tr>
<tr align="center"><td>Monday</td><td>12.30 pm</td><td>Dentist</td></tr>
</table>

The above will center all the text in all the columns of this row.

<table>
<tr><th>Day of the week</th><th>Time</th><th>Appointment</th></tr>
<tr><td>Monday</td><td align="center">12.30 pm</td><td align="center">Dentist</td></tr>

While the above sample will center the content in the columns time and appointment. 

If you set an alignment at row level, setting another at column level will not work. It will get ignored. The following alignments are available:
ALIGN=LEFT
ALIGN=RIGHT
ALIGN=CENTER

Vertical Alignment

Also you can set a vertical alignment:

<table>
<tr><th>Day of the week</th><th>Time</th><th>Appointment</th></tr>
<tr><td>Monday</td><td>12.30 pm</td><td>Dentist</td></tr>
<tr><td>Tuesday</td><td>8 pm</td><td>Party at Sam's</td></tr>
<tr><td>Wednesday</td><td>10.15 am</td><td>Pick up laundry</td></tr>
<tr><td>Thursday</td><td>4 pm</td><td>Deadline logo design</td></tr>
<tr><td>Friday</td><td>10 pm</td><td>Drinks with friends</td></tr>
<tr><td>Saturday</td><td colspan="2" rowspan="2" valign="top">Absolutely nothing</td></tr>
<tr><td>Sunday</td></tr>
</table>

In the example above, the COLSPAN and ROWSPAN make this column really big. By default, the content in it shows in the middle. With the addition of the VALIGN-attribute, it is now set to the top. You have these VALIGN options available:
VALIGN=TOP
VALIGN=BOTTOM

Background color

The attribute BGCOLOR, that you know from creating the body-tag, can be used with the TR-, TH- and TD-tag.

<table>
<tr bgcolor="#f4e842"><th>Day of the week</th><th>Time</th><th>Appointment</th></tr>
<tr><td bgcolor="#e2f8ff">Monday</td><td>12.30 pm</td><td>Dentist</td></tr>
<tr><td bgcolor="#e2f8ff">Tuesday</td><td>8 pm</td><td>Party at Sam's</td></tr>
<tr><td bgcolor="#e2f8ff">Wednesday</td><td>10.15 am</td><td>Pick up laundry</td></tr>
<tr><td bgcolor="#e2f8ff">Thursday</td><td>4 pm</td><td>Deadline logo design</td></tr>
<tr><td bgcolor="#e2f8ff">Friday</td><td>10 pm</td><td>Drinks with friends</td></tr>
<tr><td bgcolor="#bfedfc">Saturday</td><td colspan="2" rowspan="2">Absolutely nothing</td></tr>
<tr><td bgcolor="#bfedfc">Sunday</td></tr>
</table>

Above codes set a yellow background that shows underneath all the header columns. All the week days are light blue and a slightly brighter blue for the days of the weekend.

Different background colors for even/odd rows

It’s so user friendly to show your table data, using one color for even row and another for odd rows (see the example in the right menu of this course). Sadly,this is done in combination with CSS. You need to indicate which row is even and which one is odd. Then, you assign different CSS classes to each, setting the desired colors.

Fonts in tables

Honestly, the best way to set fonts in tables is to use CSS. It’s just one or two lines of codes and you’re done. But, if you want to use the FONT-tag, make sure you place it in each column. The font setting won’t work throughout the whole table.

Nesting tables

It’s allowed to nest one table in another, which will look like this

<table>
<tr><td>
Table One<br />
<table>
<tr><td>Table Two</td></tr>
</table>
</td></tr>
</table>

Make sure you close all the tags.

Table troubleshooting

When you run into problems, turn the border on to see what is happening.

Go to Step 16

Bookmark the permalink.

Comments are closed.