Creating Tables

Creating basic tables

Table 1

Create a table that just shows how the table is built using the basic table tags: table, tr and td. This table will use the default settings. In the first row, put the words "cell 1" in the first td tag. Put the words "cell 2" and "cell 3" in the second and third td tags. Cells 4, 5 and 6 go in the second row of the table. The table itself has two rows, and three columns. Tables can't go inside paragraphs, so you need to build them outside of paragraphs.

Table 2

Create a second table just like the first, but in this table, use the border attribute with a value of 1, so you can see the edges of the table and each row/cell. Remember, the border attribute is deprecated and will cause an error in the validator, but we'll use it until we learn how to style tables - inline styles don't work well for borders on tables.

Table 3

The third table will use an inline style in the table tag to set the width of the table, and will also use the border attribute. Create your third table just like the second, but with the width changed.

By default, tables display the width of what is inside them, unless the width of their contents is greater than the space available; in that case, the browser will generate a scroll bar so you can see the end of the table. However, if you want the table to be a specific width, you can use the CSS width property to change the width. See lecture notes for details.

Table 4

The fourth table will experiment with rowspan. This is how you can merge together two cells vertically across the rows of a table. Set the border of this table at 1. Do not set its width. Create three rows with three cells with text inside them in each row: 1-3 on row one, 4-6 on row 2 and 7-9 on row three. This is just like the tables above, but with an extra row.

After you have completed making this table, use the rowspan attribute to span rows 2 and 3 on the table. Remember, the rowspan attribute goes inside the cell (td) that you want to span the row below it. The value for rowspan is the number of rows that will be joined. If the number is 2, it is the originating cell, and one more directly below it.

Table 5

Let's do this again with colspan so that the top row has just two cells: cell 1 spans the first two columns, and cell 3 is the last column in the row. You'll create a 3-row, 3-column table with a border of 1 just like you did for table 4, but this time don't span any rows. Span the first two cells in the top row.

Now validate your work. You should get errors for the border attribute, but NO OTHER errors. See screenshot.