Comments, Questions, Suggestions, or Opinions












Tutorials
Lesson:

  1. What is HTML?

  2. HTML Editors
  3. HTML Elements and Attributes

  4. HTML Headings and Paragraphs

  5. HTML Formatting

  6. HTML Links

  7. HTML Images

  8. HTML Tables

  9. HTML Lists

  10. HTML Forms

Exercises
For every lesson:

  1. Hyper Text Markup Language

  2. Notepad

  3. Start tag to End tag and name="value"

  4. <h1> and <p>

  5. <b> and <i>

  6. <a href=>

  7. <img src=>

  8. <th> <tr> and <td>

  9. <OL> and <UL>

  10. <form>



My accounts:







Lesson 8: HTML Tables


HTML Table Example:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67


HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows with the <tr> tag. (tr stands for table row)

A row is divided into data cells with the <td> tag. (td stands for table data)

A row can also be divided into headings with the <th> tag. (th stands for table heading)

The <td> elements are the data containers in the table.

The <td> elements can contain all sorts of HTML elements like text, images, lists, other tables, etc.

The width of a table can be defined using CSS.

Example

<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »


An HTML Table with a Border Attribute

If you do not specify a border style, the table will be displayed without borders.

A border can be adding using the border attribute:

Example

<table border="1" style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td>
  <td>50</td>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »

Note

The border attribute is on its way out of the HTML standard.
It is better to use CSS.

Example

<style>
table,th,td
{
border:1px solid black;
}
</style>

Try it yourself »

Remember to define borders for both the table, and the table cells.


An HTML Table with Collapsed Borders

If you want the table border, and the table cells borders to collapse into one border, add border-collapse to your CSS.

Example

<style>
table,th,td
{
border-collapse:collapse
}
</style>

Try it yourself »


An HTML Table with Cell Padding

If you do not specify padding, the table cells will be displayed without padding.

To display a table with padding, use CSS to "style" the padding:

Example

th,td
{
padding:5px;
}

Try it yourself »


HTML Table Headings

Headings are defined with the <th> tag.

All major browsers display headings as bold and centered.

Example

<table style="width:300px">
<tr>
  <th>First</th>
  <th>Last</th>
  <th>Points</th>
</tr>
<tr>
  <td>Eve</td>
  <td>Jackson</td>
  <td>94</td>
</tr>
</table>

Try it yourself »

To left-justify your headings use CSS:

Example

th
{
text-align:left;
}

Try it yourself »


An HTML Table with Cell Spacing

To display a table with cell spacing, use CSS to "style" the spacing:

Example

table
{
border-spacing:5px;
}

Try it yourself »


HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table





Click here to take the exercises of this lesson -->