HTML Table Example

Number	First Name	Last Name	Points
1	Eve	Jackson	94
2	John	Doe	80
3	Adam	Johnson	67
4	Jill	Smith	50

---

Defining HTML Tables

Example

<table style="width:100%">
  <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 »

Example explained:

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

	Table data <td> are the data containers of the table. They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

---

An HTML Table with a Border Attribute

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

A border can be added using the border attribute:

Example

<table border="1" style="width:100%">
  <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 »

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

To add borders, use the CSS border property:

Example

table, th, td {
    border: 1px solid black;
}

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 borders to collapse into one border, add CSS border-collapse:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Try it Yourself »

---

An HTML Table with Cell Padding

Cell padding specifies the space between the cell content and its borders.

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

To set the padding, use the CSS padding property:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th,td {
    padding: 15px;
}

Try it Yourself »

---

HTML Table Headings

Table headings are defined with the <th> tag.

By default, all major browsers display table headings as bold and centered:

Example

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Try it Yourself »

To left-align the table headings, use the CSS text-align property:

Example

th {
    text-align: left;
}

Try it Yourself »

---

An HTML Table with Border Spacing

Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example

table {
    border-spacing: 5px;
}

Try it Yourself »

	If the table has collapsed borders, border-spacing has no effect.

---

Table Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Try it Yourself »

---

Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

Try it Yourself »

---

An HTML Table With a Caption

To add a caption to a table, use the <caption> tag:

Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Try it Yourself »

	The <caption> tag must be inserted immediately after the <table> tag.

http://www.w3schools.com/html/html_tables.asp

I am Red

I am Blue

Try it Yourself »

---

HTML Styling

Every HTML element has a default style (background color is white and text color is black).

Changing the default style of an HTML element, can be done with the style attribute.

This example changes the default background color from white to lightgrey:

Example

<body style="background-color:lightgrey">
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

Try it Yourself »

	The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5.

---

The HTML Style Attribute

The HTML style attribute has the following syntax:

style="property:value"

The property is a CSS property. The value is a CSS value.

	You will learn more about CSS later in this tutorial.

---

HTML Text Color

The color property defines the text color to be used for an HTML element:

Example

<body>
  <h1 style="color:blue">This is a heading</h1>
  <p style="color:red">This is a paragraph.</p>
</body>

Try it Yourself »

---

HTML Fonts

The font-family property defines the font to be used for an HTML element:

Example

<body>
  <h1 style="font-family:verdana">This is a heading</h1>
  <p style="font-family:courier">This is a paragraph.</p>
</body>

Try it Yourself »

	The <font> tag, supported in older versions of HTML, is not valid in HTML5.

---

HTML Text Size

The font-size property defines the text size to be used for an HTML element:

Example

<body>
  <h1 style="font-size:300%">This is a heading</h1>
  <p style="font-size:160%">This is a paragraph.</p>
</body>

Try it Yourself »

---

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example

<body>
  <h1 style="text-align:center">Centered Heading</h1>
  <p>This is a paragraph.</p>
</body>

Try it Yourself »

	The <center> tag, supported in older versions of HTML, is not valid in HTML5.

---

Chapter Summary

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

http://www.w3schools.com/html/html_styles.asp