2. Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML

3. Preformatted Tables Type to use the preformatted text tag. Enter the table text, aligning the columns of the table by inserting blank spaces as appropriate. Type to turn off the preformatted text tag.Type to turn off the preformatted text tag.

4. 3 A Text Table This figure shows a text table.

5. Graphical Tables Enter the AND tags to identify the beginning and end of the table. Enter and tags to identify the beginning and the end of each table row. Enter and to identify the beginning and the end of each table cell. Enter and to identify text that will act as table headers.

6. A Graphical Table 5 This figure shows a graphical table

7. Simple Table Tags (2 x 2) first row, first cell first row, second cell second row, first cell second row, second cell

8. Table Techniques Start each table row on it’s own separate line. Add blank spaces between table rows. Indent the table cell tags three or more spaces from the table row tags to make them easier to read. Generously add Comment tags.

9. Inserting a Comment Tag To insert a comment into a HTML file, enter the following tag: Anything after the exclamation point is interpreted as a comment and is not displayed by the browser.

10. Table Frames and Rules The frames attribute allows you to determine which sides of the table will have borders. The frame attribute syntax is: –type is either “box” (the default), “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, or “void”

11. Effect of Different Frame Values This figure shows the effect of each of the frame values on the table grid.

12. Creating Frames and Rules Continued The rules attribute lets you control how the table gridlines are drawn. The syntax of the rules attribute is: –type is either “all”, “rows”, “cols”, or “none”

13. Effect of Different Rules Values

14. Changing a Table’s Appearance Table Border: (size is in pixels) Individual Table Cell Borders: (default is 2 pixels) The gap between the cell text and surrounding cell border: (default is 1 pixel)

15. Aligning a Table on the Page Left aligned, wrapping text to the right: Right aligned, wrapping text to the left: Center on the page: Best Practice is to use CSS styles

16. Row Groups The tag is used to group the header content in an HTML table. The thead element should be used in conjunction with the tbody and tfoot elements.tbodytfoot The tbody element is used to group the body content in an HTML table and the tfoot element is used to group the footer content in an HTML table.

17. Note: must appear before within a table, so that a browser can render the foot before receiving all the rows of data. The table header, table body, and table footer must all contain the same number of columns. Notice that these elements will not affect the layout of the table by default. However, you can use CSS to let these elements affect the table's layout. Row Groups (continued)

18. Specifying Table Size Size can be in either pixels or as a percentage of the browser’s display area. Percentages must be enclosed in quotation marks. Example: WIDTH = “70%”

19. Creating a Spanning Cell To create a cell that spans several columns, enter the COLSPAN property within the or tags as follows: where value is the number of columns spanned.

20. Creating a Spanning Cell (continued) To create a cell that spans several rows, enter the ROWSPAN property within the or tags as follows: where value is the number of rows spanned.

21. Creating a Page Layout with Tables Create gutters and use cell padding to keep your columns from crowding each other. Add background colors to columns to provide visual interest and variety. Use the VALIGN=TOP property in cells containing articles, to ensure that the text flows from the top down.

22. Use row spanning to vary the size and starting point of articles within your columns. Having all articles to start and end within the same row creates a static layout that is difficult to read. Creating a Page Layout with Tables (continued) Avoid having more than three columns of text, if possible. Inserting additional columns could make the column widths too narrow and make the text too hard to read.