Creating and styling tables
Download as PPTX, PDF0 likes752 views
This document discusses HTML tables and how to style them using CSS. It covers the basic structure of HTML tables using <table>, <tr>, and <td> tags. It also discusses using <th> for table headings, and rowspan and colspan attributes to span rows and columns. The document notes that tables should not be used solely for layout and provides examples of table styling with borders, padding, spacing and background colors. It introduces additional table tags like <caption>, <col>, <thead> and <tbody> and describes styling techniques like nth-child pseudo-classes for striped tables.
Creating and styling tables
- 1. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early 2014 http://www.funwebdev.com Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar © 2015 Pearson http://www.funwebdev.com Creating and Styling Tables Chapter 4
- 2. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar INTRODUCING TABLES Section 1 of 6
- 3. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar HTML Tables A table in HTML is created using the <table> element Tables can be used to display: •Many types of content •Calendars, financial data, lists, etc… •Any type of data •Images •Text •Links •Other tables A grid of cells
- 4. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar HTML Tables Example usages
- 5. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Tables Basics • an HTML <table> contains any number of rows (<tr>) • each row contains any number of table data cells (<td>) • Content goes inside of <td></td> tags <table> <tr> <td>The Death of Marat</td> </tr> </table> Rows and cells content
- 6. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar A basic Example
- 7. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar With Table Headings th
- 8. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Why Table Headings A table heading <th> • Browsers tend to make the content within a <th> element bold • <th> element for accessibility (it helps those using screen readers) • Provides some semantic info about the row being a row of headers
- 9. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Spanning Rows and Columns Span Span Span a Row Each row must have the same number of <td> or <th> containers. If you want a given cell to cover several columns or rows, use the colspan or rowspan attributes
- 10. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Using Tables for Layout It works in many situations • Popular in 1990s • Results in table bloat • Not semantic • Larger HTML pages • Browser quirks
- 11. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Example Table layouts
- 12. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Additional table tags • <caption> • <col>,<colgroup> • <thead> • <tfoot> • <tbody>
- 13. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar STYLING TABLES Section 2 of 6
- 14. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Styling Tables In HTML5 it is left to CSS, However legacy support for deprecated HTML attributes still exist width, height—for setting the width and height of cells cellspacing—for adding space between every cell in the table cellpadding—for adding space between the content of the cell and its border bgcolor—for changing the background color of any table element background—for adding a background image to any table element align—for indicating the alignment of a table in relation to the surrounding container The old way’s deprecated
- 15. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Styling Tables Borders
- 16. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Styling Tables Padding and spacing
- 17. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Styling Tables Examples
- 18. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Nth-Child Nifty Table styling tricks: hover effect and zebra-stripes
- 19. Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar What you’ve learned Introducing Tables Styling Tables 1 2 7