9781305503939_t6 2.pptx - HTML5 and CSS3 7 Edition th...

This preview shows page 1 - 16 out of 60 pages.

HTML5 and CSS3 7 th Edition Working with Tables and Columns Tutorial 6
XP Objectives Explore the structure of a web table Create table heading and data cells Apply CSS styles to a table Create cells that span multiple rows and columns Add a caption to a table 2 New Perspectives on HTML5 and CSS3, 7th Edition
XP Objectives (continued) Create row and column groups Apply styles to row and column groups Display page elements in table form Create a multi-column layout 3 New Perspectives on HTML5 and CSS3, 7th Edition
XP Structure of a Web Table New Perspectives on HTML5 and CSS3, 7th Edition 4
XP Introducing Web Tables Web table HTML structure that consists of multiple table rows Each table row contains one or more table cells Effective tool for organizing and classifying web page content Consists of a table element 5 New Perspectives on HTML5 and CSS3, 7th Edition
XP Marking Tables and Table Rows A table element contains a collection of table rows marked using the tr (table row) element A table contains cells within each row Size of a table is defined by number of table rows number of cells within rows 6 New Perspectives on HTML5 and CSS3, 7th Edition
XP Marking Tables and Table Rows (continued 1) General structure of a web table: <table> <tr> table cells </tr> <tr> table cells </tr> </table> 7 New Perspectives on HTML5 and CSS3, 7th Edition
XP Marking Tables and Table Rows (continued 2) New Perspectives on HTML5 and CSS3, 7th Edition 8
XP Marking Table Headings and Table Data Web tables support two types of table cells Header cells o Contains content placed at the top of a column or beginning of a row o By default, displays text in bold and centers text horizontally o Marked using the th element 9 New Perspectives on HTML5 and CSS3, 7th Edition
XP Marking Table Headings and Table Data (continued 1) Data cells o Contains content within columns or rows o By default, displays text as unformatted text and is aligned to the left within the cell o Marked using the td element New Perspectives on HTML5 and CSS3, 7th Edition 10
XP Marking Table Headings and Table Data (continued 2) New Perspectives on HTML5 and CSS3, 7th Edition 11
XP Marking Table Headings and Table Data (continued 3) New Perspectives on HTML5 and CSS3, 7th Edition 12
XP Adding Table Borders with CSS The CSS border property is used to add borders to any part of a web table Borders need not be of the same style Two style choices for borders Separate borders Collapsed borders 13 New Perspectives on HTML5 and CSS3, 7th Edition
XP Adding Table Borders with CSS (continued 1) New Perspectives on HTML5 and CSS3, 7th Edition 14
XP Adding Table Borders with CSS (continued 2) To choose between separate or collapsed borders model apply the following property to the table element: border-collapse: type ; where type is either separate or collapse The separate borders model sets the spacing between borders using border-spacing: value where

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture