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

Tables are used to display content on a webpage in a tabular format (much like a spreadsheet).

This tutorial focuses on:

Table setup

A table is created using the <table> tag and a closing </table> tag. A table consists of rows and columns.

Attributes of the <table> tag
Table setup:
<table border="1" cellspacing="2" cellpadding="2"> <!-- table content goes here --> </table>

Table rows

Table rows are created using the <tr> tag which should go inside the <table> tag. Use an opening <tr> tag and its closing tag </tr> for every row in the table.

Adding rows to the table:
<table border="1" cellspacing="2" cellpadding="2"> <tr></tr> <tr></tr> <tr></tr> </table>

Table cells

Table cells are created using the <td> tag which should go inside the <tr> tag. Use an opening <td> tag and its closing tag </td> for every cell in the table.

Adding cells to the table:
<table border="1" cellspacing="2" cellpadding="2"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>

Adding content to the table

Now that we have a structure for our table, we can add some content to it. The content of a table is placed inside the table's cells..so inside the <td> tags in the table.

Adding content to the table:
<table border="1" cellspacing="2" cellpadding="2"> <tr> <td>First row, first column</td> <td>First row, second column</td> </tr> <tr> <td>HTML</td> <td>Javascript</td> </tr> <tr> <td>CSS</td> <td>PHP</td> </tr> </table>
What the table will look like:
First row, first column First row, second column
HTML Javascript
CSS PHP

Read our HTML table concepts tutorial for much more info on working with tables.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information