1 / 23

HTML Overview

HTML Overview. Part 4 – Tables. HTML Tables. Tables are defined with the <table> </table> tag pair. A table is divided into rows with < tr > </ tr > tag pairs. tr stands for "table row" E ach row is divided into data cells with <td> </td> tag pairs.

elton-fulton
Download Presentation

HTML Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Overview Part 4 – Tables

  2. HTML Tables • Tables are defined with the <table></table>tag pair. • A table is divided into rows with <tr></tr>tagpairs. • trstands for "table row" • Each row is divided into data cells with <td></td>tag pairs. • tdstands for "table data," and holds the content of a data cell. • A <td>tag can contain text, links, images, lists, forms, other tables, etc.

  3. Parts of a Table • table header: • A cell with bold, centered text in the first row of the table. • <th></th> creates a table header

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

  5. table cell: • Each “box” in the table is called a cell. • <td></td> defines the start and end of a table cell

  6. HTML Table Example <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>

  7. Table Attributes • 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.

  8. Table With Borders • 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>

  9. Tables Without Borders <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>

  10. Table Headers <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>

  11. Table With a Caption <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>

  12. Cell Padding Use 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>

  13. Cell Spacing Use 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>

  14. Tags Inside a Table <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>

  15. HTML Table Tags

  16. HTML Table Tags (cont.)

  17. HTML Overview Part 4 – Hyperlinks

  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 text will display as the hyperlink on your page.

  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 hrefattribute sets the URL of the destination page. <a href=“url”>Link Text</a> This is the URL of the destination site.

  20. 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 hrefattribute sets the URL of the destination page. <a href=“url”>Link Text</a>

  21. 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>

  22. HTML Links Tags

  23. Assignment Work through the W3Schools HTML Tables tutorial http://www.w3schools.com/html/html_tables.asp and the HTML Hyperlinks tutorial http://www.w3schools.com/html/html_links.asp Complete Practice: Computer Viruses – part 3 of 5 Save your file as lastname_computer_viruses2

More Related