Lesson 8:   HTML Tables  

     Introduction     

The actual function of tables is to arrange data (i.e. text, images & other content) in rows and columns. But most frequently, tables are used as a layout device to devide webpages into different sections like header, footer, right and left column, main center content and so on.

To keep this lesson simple, I´ll show you only the most important elements and presentational attributes you need to know for HTML tables. How you can use tables for your website layout is explained in lesson 11: Website Layout .

     The Basic Structure of an HTML Table     

To form a table you basically need three HTML elements: TABLE, TR (Table Row) and TD (Table Data). How these elements are correctly nested you can see in the code example below, which creates a table of 2 rows and 2 columns rendering 4 table data cells. The graphic below the code illustrates the three elements.

Watch the video to learn how to compose a table manually and then how to use 1stPage2000´s speedy table sizer.

Video button not working ? Click Here

Here´s another very basic example for a table.

Display Example: This is how it looks like in your browser.

     Presentational Attributes for Tables     

You see, a table in its very basic form like the one above doesn´t look good. Also, without any attributes, the table size (height and width) will always be determined by the amount of content in the table cells.

The most frequently used attributes for the TABLE element are: ALIGN, BORDER, WIDTH, HEIGHT, CELLPADDING and CELLSPACING. To illustrate each attribute´s effect on a table, I´ll apply them to the table in the previous example. And in order to save space here, I´ll only show you the relevant part of the HTML code.

   The ALIGN Attribute

ALIGN: Possible values: left / right / center. By default, a table is aligned to the left margin, so you only need to include this attribute when you want to center the table or align the table to the right margin.

Display Example: This is how it looks like in your browser.

   The BORDER Attribute

BORDER: the thickness of the table border in pixels, default is 0.

Display Example: This is how it looks like in your browser.

As you can see, the default for border color and style is a grey solid border with shadows and only the outside border takes the thickness specified with the BORDER attribute, while the borders around each single table cell are only 1 pixel thick. Don´t worry about this now - in lesson 10: Cascading Style Sheets, you will learn a lot of additional formatting possibilities.

   The Attributes WIDTH and HEIGHT

WIDTH and HEIGHT: these two attributes define a table´s width and height, either with an absolute value in pixels or a relative value ( percentage ). So a value of 70 means an absolute width/height of 70 pixels and 70% means 70% of the available horizontal/vertical space.

For this example I´ve included two tables: one with an absolute width of 500 pixels and an absolute height of 200 pixels and another one with a relative width of 50 percent and a relative height of 20 percent.

Display Example: This is how it looks like in your browser.

Watch the video to see how the tables sizes behave when you resize your browser window.

Video button not working ? Click Here

   The Attributes CELLPADDING and CELLSPACING

CELLPADDING and CELLSPACING: The attribute CELLPADDING describes the space in pixels between a table cell´s border and its content while the attribute CELLSPACING describes the space in pixels between the different table cells. These spaces are always equally applied to all four sides. The following graphic illustrates this. Much more flexibility in applying spaces to tables is given with CSS (Cascading Style Sheets), which will be explained in lesson 10.

Including cellspacing and cellpadding into our example table we get ...

Display Example: This is how it looks like in your browser.

     Text Alignment inside the Table Cells     

The default alignment for content (text, images) inside a table cell is left (horizontally) and middle (vertically). There are two attributes which you can use inside the TD element to align content: ALIGN for the horizontal alignment (left, center, right) and VALIGN for vertical alignment (top, middle, bottom).

However, a better option for aligning content within a table cell is given with CSS (Cascading Style Sheets - see lesson 10). For now, just take a look at the example below which shows you a few different options for the horizontal and vertical alignment.

Display Example: This is how it looks like in your browser.

     WIDTH and HEIGHT of Table Cells     

Especially when using tables for the layout of a webpage, you want different sizes for your table cells, some with relative and others with fixed widths. For this purpose you can also use the attributes WIDTH and HEIGTH for the TD (table data) elements using either absolute (pixels) or relative (percentage) values.

Again, it´s better to use CSS. We´ll also have a closer look at the practical use for different table data widths in lesson 11: Website Layout. For now, just study the example below.

You will notice that the relative values for sizes of table data cells are relative to the size of the table, not the size of the browser window (see height of second row in the example below). Also, all table data cells within the same column adopt the same (largest specified) width - therefore, the attribute width="50" in the example below has no effect. The same rule applies to the height: all table data cells in a row adopt the same (largest specified) height.

Display Example: This is how it looks like in your browser.

     Joining Different Table Cells     

Finally, I´d like to quickly show you two more attributes for the table data element TD: COLSPAN and ROWSPAN. I won´t go into details about these now, because I don´t want to stress your brain with complex things you probably won´t need anyway. Just want to show you what´s possible, so you remember it when you want to create more complex tables, for example for use in your webpage layout.

The function of COLSPAN is to span a table data cell over a certain number of columns, thus joining the cells within the same row. And the function of ROWSPAN is to span a table data cell over a certain number of rows, thus joining the cells within the same column.

Relax ! Just sit back and watch the video to see how I create a very simple table and play around joining different cells. Then do the same and experiment a little bit if you like.

Video button not working ? Click Here

The next two lessons are going to be very fun. You are about to learn how to use different font styles, font sizes, text colors, background colors and much more and also how to organize the styles information for your whole website in one simple file.