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 row"  Each row is divided into data cells with tag pairs. o td stands for "table data," and holds the content of a data cell. o A 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. creates a table header

table row : defines the start and end of a table row 4

table cell : Each “box” in the table is called a cell. defines the start and end of a table cell 5

HTML Table Example 6 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Table Attributes 7  The opening tag may also contain attributes for the table:  specifies the thickness of the cell borders in pixels  sets the amount of space between the cells in the table  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: Row 1, cell 1 Row 1, cell 2

Tables Without Borders 9 This table has no borders:

Table Headers 10 Table headers: Name Telephone Bill Gates

Table With a Caption 11 Monthly savings Month Savings January $100 February $50

Cell Padding Use cellpadding to create more white space between the cell content and its borders. With cellpadding: First Row Second Row

Cell Spacing Use cellspacing to increase the distance between the cells. With cellspacing: First Row Second Row

Tags Inside a Table 14 This is a paragraph This is another paragraph This cell contains a table: A B C D

HTML Table Tags TagDescription Defines a table within the body of an HTML document. Defines a row within a table. Defines a data cell within a row in a table. 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.) TagDescription 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. Defines a caption that appears above the table.

HTML Overview Part 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 tells the browser the text inside the tag is a hyperlink and.  The href attribute sets the URL of the destination page. Link Text 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 tells the browser the text inside the tag is a hyperlink and.  The href attribute sets the URL of the destination page. Link Text 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 tells the browser the text inside the tag is a hyperlink and.  The href attribute sets the URL of the destination page. Link Text 20

HTML Links Example HTML Tutorial This is a link to a page on this website. Googl e This is a link to a website on the World Wide Web.

HTML Links Tags TagDescription 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 tutorial and the HTML Hyperlinks tutorial Complete Practice: Computer Viruses – part 3 of 5 Save your file as lastname_computer_viruses2