HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  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

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.

Empty table cell:
<table border="2"> <tr> <td>Four cells in this table</td> <td>One is empty</td> </tr> <tr> <td>Three are filled</td> <td>&nbsp;</td> </tr> </table>
Output:
Four cells in this table One is empty
Three are filled  

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.

Table headings:
<table border="2"> <tr> <th>Web development</th> <th>Software development</th> </tr> <tr> <td>HTML</td> <td>C++</td> </tr> <tr> <td>PHP</td> <td>Fortran</td> </tr> </table>
Output:
Web development Software development
HTML C++
PHP Fortran

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.

Table caption:
<table border="2"> <caption>Computer languages</caption> <tr> <th>Web development</th> <th>Software development</th> </tr> <tr> <td>HTML</td> <td>C++</td> </tr> <tr> <td>PHP</td> <td>Fortran</td> </tr> </table>
Output:
Computer languages
Web development Software development
HTML C++
PHP Fortran

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.

Using only cellspacing:
<table border="2" cellspacing="14"> <caption>Computer languages</caption> <tr> <th>Web development</th> <th>Software development</th> </tr> <tr> <td>HTML</td> <td>C++</td> </tr> <tr> <td>PHP</td> <td>Fortran</td> </tr> </table>
Output:
Computer languages
Web development Software development
HTML C++
PHP Fortran
Using only cellpadding:
<table border="2" cellpadding="14"> <caption>Computer languages</caption> <tr> <th>Web development</th> <th>Software development</th> </tr> <tr> <td>HTML</td> <td>C++</td> </tr> <tr> <td>PHP</td> <td>Fortran</td> </tr> </table>
Output:
Computer languages
Web development Software development
HTML C++
PHP Fortran

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.

Example:
<table border="2" cellspacing="4" cellpadding="10" width="80%" align="center"> <caption>Web Languages</caption> <tr> <th width="40%" align="center">Client-side</th> <td align="center">HTML</td> <td align="center">CSS</td> <td align="center">Javascript</td> </tr> <tr> <th align="center">Server-side</th> <td align="center">ColdFusion</td> <td align="center" colspan="2">PHP</td> </tr> </table>
Output:
Web Languages
Client-side HTML CSS Javascript
Server-side ColdFusion PHP

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.

Example:
<table border="2" cellspacing="4" cellpadding="10" width="90%" align="center"> <caption>Computer Languages</caption> <tr> <th align="center" rowspan="2">Web languages</th> <td align="center">HTML</td> <td align="center">CSS</td> </tr> <tr> <td align="center">Javascript</td> <td align="center">PHP</td> </tr> <tr> <tr> <th align="center" rowspan="2">Software languages</th> <td align="center">C</td> <td align="center">C++</td> </tr> <tr> <td align="center">FORTRAN</td> <td align="center">Visual Basic</td> </tr> <tr> </table>
Output:
Computer Languages
Web languages HTML CSS
Javascript PHP
Software languages C C++
FORTRAN Visual Basic

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 table content:
<table border="2"> <caption>Computer languages</caption> <tr> <th>Web development</th> <th>Software development</th> </tr> <tr> <td align="center">HTML</td> <td align="center">C++</td> </tr> <tr> <td align="left">PHP</td> <td align="right">Fortran</td> </tr> </table>
Output:
Computer languages
Web development Software development
HTML C++
PHP Fortran

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.

<table border="2" align="right"> <caption>Computer languages</caption> <tr> <th>Web development</th> <th>Software development</th> </tr> <tr> <td>HTML</td> <td>C++</td> </tr> <tr> <td>PHP</td> <td>Fortran</td> </tr> </table>
Output:
Computer languages
Web development Software development
HTML C++
PHP Fortran
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information