The Structure of a Web Table

1. beginning of the table structure table cells first row of three in the table end of the table structure The Structure of a Web Table <table> <tr> <td> … </td> <td> … </td> </tr> <tr> <td> … </td> <td> … </td> </tr> <tr> <td> … </td> <td> … </td> </tr> </table> You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell.

2. two rows Example: A Simple 2x2 Table two columns <table> <tr> <td> First Cell </td> <td> Second Cell </td> </tr> <tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table>

3. Row of table headings Adding Table Headings with the <th> Tag Text in cells formatted with the <th> tag is bold and centered above each table column.

4. table headings appear bold and centered over their columns Result of Table Headings as Displayed in the Browser

5. Creating a Table Caption • The syntax for creating a caption is: <caption align=“alignment”>caption text</caption> wherealignmentindicates the caption placement • a value of bottomcenters the caption below the table • a value of topor centercenters the caption above the table • a value of leftor rightplace the caption above the table to the left or right

6. table caption caption text caption will be centered above the table Inserting a Table Caption

7. Marking Row Groups in a Table 0 or 1 of these 0 or 1 of these 0 or more of these. They are listed last (after the tfoot element) You can divide a table’s rows into row groups, in which each group element contains different types of content and can be formatted differently

8. Marking Column Groups in a Table Once the table columns have been determined by the browser, you can reference them through the use of column groups <table> <colgroup> <col class=“weekdays” span=“5” /> <col class=“weekend” span=“2” /> </colgroup> … Implies there are 7 columns in this table.

9. Adding a Table Border • By default, browsers display tables without table borders • The syntax for creating a table border is: <table border=“value type color”> … </table> where value is the width of the border in pixels

10. Adding a 5-Pixel Border to a Table Only the outside border is affected by the border attribute; the internal gridlines are not affected

11. Adding a Table Summary The summary attribute allows you to include a more detailed description about the table<table summary="description">

12. Adding Space Between Table Cells • The cell spacing attribute controls the amount of space inserted between table cells • The syntax for specifying the cell space is: <table cellspacing=“value”> • value is the width of the interior borders in pixels • the default cell spacing is 2 pixels

13. Example: Setting the Cell Spacing to 0 Pixels Setting the cell spacing to 0 reduces the width of the borders between individual table cells. This will not remove the border between the cells.

14. Adding Space Within a Cell • To control the space between the table text and the cell borders, add the cell padding attribute to the table tag • The syntax for this attribute is: <table cellpadding=“value”> • value is the distance from the table text to the cell border, as measured in pixels • the default cell padding value is 1 pixel

15. Example: Setting the Cell Padding to 4 Pixels A table with an increased amount of cell padding. By increasing the cell padding, you added space inside the table.

16. Defining the Table Size • The syntax for specifying the table size is: <table width=“size” height=“size”> where size is the width and height of the table as measured in pixels or as a percentage of the display area • If you specify an absolute size for a table in pixels, its size remains constant, regardless of the browser or monitor settings used

17. Example: Setting the Width of theTable to 70% of the Page Width

18. Setting Cell and Column Sizes Horizontally • To set the width of an individual cell, add the width attribute to either the <td> or <th> tags • The syntax is: width=“value” • value can be expressed either in pixels or as a percentage of the table width • a width value of 30% displays a cell that is 30% of the total width of the table

19. Setting Cell and Column Sizes Vertically • The height attribute can be used in the <td> or <th> tags to set the height of individual cells • The height attribute is expressed either in pixels or as a percentage of the height of the table • If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text

20. Specifying Which Sides of the Table Have Borders A table frame specifies which sides of the table have borders<table border="value" frame="type">

21. Specifying Which Internal Gridlinesof the Table Are Drawn A table rule specifies how the internal gridlines are drawn within the table<table border="value" rules="type">

22. Spanning Rows and Columns • To merge several cells into one, you need to create a spanning cell • A spanning cell is a cell that occupies more than one row or column in a table • Spanning cells are created by inserting the rowspan and colspan attribute in a <td> or <th> tag. • The syntax for these attributes is: <tdrowspan=“value” colspan=“value”> … </td> • value is the number of rows or columns that the cell spans in the table

23. This cell spans two columns and two rows This cell spans three columns This cell spans three rows Example of Spanning Cells

24. four table cells in the first row only three table cells are required for the second and third rows HTML code resulting table A Table Structure with a Row-Spanning Cell

25. Horizontally Aligning a Table on the Web Page • To align a table with the surrounding text, use the align attribute as follows: align=“alignment” • alignmentequals left, right, or center • left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side • centeralignment places the table in the horizontal center of the page, but does not allow text to wrap around it • The align attribute is similar to the align attribute used with the <img> tag

26. Aligning the Cell Contents of a Table • By default, cell text is placed in the middle of the cell, aligned with the cell’s left edge • By using the align and valign attributes, you can specify the text’s horizontal and vertical placement • To align the text for a single column, you must apply the align attribute to every cell in that column

27. Values of the align and valignAttributes

28. You Can Color Rows or Individual Cells of the Table

29. <tr background=“parch.jpg”> parch.jpg <table background=“parch.jpg”> <td background=“parch.jpg”> Applying a Background Image to a Table, Row, or Cell

30. Formatting Tables with CSS Starting with CSS2, Cascading Style Sheets included support for Web tables. For example, HTML file: <table class=“schedule”> CSS file: table.schedule td {border:10px solid gray} To avoid confusion, it’s best to style tables either inline or using CSS but not mix the two approaches

31. Precedence Rules in Formatting Tables with CSS

32. Using Tables for Layout • HTML tables are often used to define the layout of an entire Web page • If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool

33. Creating a Newspaper-Style Layout With Nested Tables

34. Are Table Layouts Really a Good Idea? Table layouts are not in the spirit of HTML Table layouts are difficult to revise Tables take longer to render Tables can be code-heavy Tables can be inaccessible to users with disabilities