HTML Overview Part 4 – Tables 1. HTML Tables Tables are defined with the tag pair. A table is divided into rows with tag pairs. o tr stands for "table.

HTML OverviewPart 4 – Tables

1

HTML Tables

Tables are defined with the <table> </table> tag pair.

A table is divided into rows with <tr> </tr> tag pairs.

o tr stands for "table row"

Each row is divided into data cells with <td> </td> tag pairs.

o td stands for "table data," and holds the content of a data cell.

o A <td> tag can contain text, links, images, lists, forms, other tables, etc.

Parts of a Table

3

table header:

•A cell with bold, centered text in the first row of the table.

•<th> </th> creates a table header

table row:

•<tr> </tr> defines the start and end of a table row

4

table cell:

•Each “box” in the table is called a cell.

•<td> </td> defines the start and end of a table cell

5

HTML Table Example

6

<table><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>

Table Attributes

7

The opening <table> tag may also contain attributes for the table:

<table border=“value”> specifies the thickness of the cell borders in pixels

<table cellpadding=“value”> sets the amount of space between the cells in the table

<table width=“value”> specifies the width of the table either in the number of pixels or as a percentage of the page width.

Table With Borders

8

If you do not specify a border attribute, the table will be displayed without borders. To display a table with borders, specify the border attribute:

<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>

Tables Without Borders

9

<h4>This table has no borders:</h4><table><tr> <td>100</td> <td>200</td> <td>300</td></tr><tr> <td>400</td> <td>500</td> <td>600</td></tr></table>

Table Headers

10

<h4>Table headers:</h4><table border="1"><tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table>

Table With a Caption

11

<table border="1"> <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>

Cell PaddingUse cellpadding to create more white space between the cell content and its borders.

<h4>With cellpadding:</h4><table border="1“ cellpadding="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>

Cell SpacingUse cellspacing to increase the distance between the cells.

<h4>With cellspacing:</h4><table border="1" cellspacing="10"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>

Tags Inside a Table

14

<table border="1"><tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td></table>

HTML Table Tags

Tag Description

<table> </table> Defines a table within the body of an HTML document.

<tr> </tr> Defines a row within a table.

<td> </td> Defines a data cell within a row in a table.

<th> </th> Defines a cell within a table that displays with bold text – a header cell

border=“value” Table attribute that specifies the thickness of the table borders in pixels

cellpadding=“value” Table attribute that sets the amount of space between the cells in the table.

HTML Table Tags (cont.)

Tag Description

width=“value” Table attribute that specifies the width of the table either in the number of pixels or as a percentage of the page width.

<caption> </caption> Defines a caption that appears above the table.

HTML OverviewPart 4 – Hyperlinks

17

A hyperlink is is a word, group of words, or image that you can click on to jump to a new document .

Hyperlinks are displayed in blue underlined text in the browser window.

Visited hyperlinks are displayed in purple underlined text.

The anchor tag <a> </a> tells the browser the text inside the tag is a hyperlink and.

The href attribute sets the URL of the destination page.

<a href=“url”>Link Text</a>

This text will display as the hyperlink on your page.

18

A hyperlink is is a word, group of words, or image that you can click on to jump to a new document .

Hyperlinks are displayed in blue underlined text in the browser window.

Visited hyperlinks are displayed in purple underlined text.

The anchor tag <a> </a> tells the browser the text inside the tag is a hyperlink and.

The href attribute sets the URL of the destination page.

<a href=“url”>Link Text</a>

This is the URL of the destination site.

19

A hyperlink is is a word, group of words, or image that you can click on to jump to a new document .

Hyperlinks are displayed in blue underlined text in the browser window.

Visited hyperlinks are displayed in purple underlined text.

The anchor tag <a> </a> tells the browser the text inside the tag is a hyperlink and.

The href attribute sets the URL of the destination page.

<a href=“url”>Link Text</a>20

HTML Links Example

<p><a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.</p>

<p><a href="http://www.google.com/">Google</a> This is a link to a website on the World Wide Web.</p>

HTML Links Tags

Tag Description

<a> </a> Anchor tag – tells the browser the text inside the tag is a hyperlink

href Attribute that sets the URL of the destination page.

Assignment

23

Work through the W3Schools HTML Tables tutorialhttp://www.w3schools.com/html/html_tables.aspand the HTML Hyperlinks tutorialhttp://www.w3schools.com/html/html_links.asp

Complete Practice: Computer Viruses – part 3 of 5Save your file as lastname_computer_viruses2