• Home
• About
• FAQ
• Contact
• Link
• Sitemap

1. HTML intro
2. Web pages and you

1. HTML getting started
2. HTML basics
3. HTML document

1. HTML text formatting 1
2. HTML text formatting 2
3. HTML text formatting 3
4. HTML fonts
5. HTML entities

1. HTML links
2. HTML email links

1. HTML images
2. HTML image maps

1. HTML forms
2. HTML form labels
3. HTML fieldset/legend

1. HTML tables
2. HTML tables concepts

1. HTML frames

1. HTML backgrounds
2. HTML colors
3. HTML color shades
4. HTML color usage

1. HTML stylesheets
2. HTML div/span

1. HTML audio
2. HTML video
3. HTML objects
4. HTML download media

1. HTML head section
2. HTML meta tags
3. HTML scripts
4. HTML declarations
5. HTML document types

1. HTML tag rules
2. HTML things to avoid
3. URL formatting
4. URL encoding/decoding
5. HTML use/access
6. HTML publish work

1. HTML marquees

1. HTML history
2. HTML summary

HTML tables concepts

There is alot you can do with tables. You can add headings & captions to tables, male cells span multiple rows & columns, align the content within cells, and more.

This tutorial focuses on:

• Empty cells
• Headings
• Captions
• Cellspacing & Cellpadding
• Spanning multiple/rows columns
• Aligning table content

Empty cells

Sometimes you may not need to place content inside of a table cell, instead you just need the cell to be there. But a table cell may not appear unless it has content inside of it.

You can include empty cells in a table by placing the   character entity inside a table cell. This way a table cell technically has something inside of it (just a space character) but it's not visible and the table cell will appear empty on a webpage.

Headings

You can display headings in a table using the <th> tag. A heading is an emphasized cell in a table. Such an emphasis in tables can be important depending on your situation. Use the <th> tag just like the <td> tag.

Captions

A caption is added to a table using the <caption> tag which should be placed right below the <table> tag before the first <tr> tag.

Cellspacing & Cellpadding

By default, the cells of a table look really stuffy and smashed together. To fix this, the cellspacing and cellpadding properties are used.

The cellspacing property takes a numeric value denoting how much space to put between cells. The cellpadding property takes a numeric value denoting how much padding is required between what is in the cells and the cell walls.

Spanning multiple/rows columns

Table column spanning

Why should all rows have the same number of columns in a table? There may be situations where you need a cell or cells to span more than one column. This is achieved using the colspan attribute of the <td> tag. The colspan attribute takes a numeric value indicating how many columns a cell should span.

Table row spanning

If a cell can span more than one column, why can't it span more than one row?

You can make a cell span more than one row using the rowspan attribute of the <td> tag. The rowspan attribute takes a numeric value indicating how many rows it should span.

Aligning table content

You can align table content using the align attribute inside the <td> tag. This attribute can take the values "left" to align content to the left, "center" to align content to the center, or "right" to align content to the right.

Aligning the table itself

Just as you can set the alignment of table content, you can set the alignment of the table itself. This is done the same way as setting the alignment of table content.