html overview
DESCRIPTION
HTML Overview. Part 4 – Tables. HTML Tables. Tables are defined with the tag pair. A table is divided into rows with < tr > tag pairs. tr stands for "table row" E ach row is divided into data cells with tag pairs. - PowerPoint PPT PresentationTRANSCRIPT
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 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.
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.