1 / 12

Tutorial 5: Tables

Tutorial 5: Tables. Session 5.1. OBJECTIVES. Create a table Insert a table summary Insert a table caption Add rows and cells Merge Cells inside a Table. Creating a Table. <table> </table> Attributes: cellspacing : Spacing between cells (in px )

kelly-meyer
Télécharger la présentation

Tutorial 5: Tables

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tutorial 5: Tables Session 5.1.

  2. OBJECTIVES • Create a table • Insert a table summary • Insert a table caption • Add rows and cells • Merge Cells inside a Table

  3. Creating a Table • <table> </table> • Attributes: • cellspacing: Spacing between cells (in px) • cellpadding: Spacing within cells (in px) • border: Thickness of the table borders (in px)

  4. Creating a Table <body> <table border=“1” cellpadding=“3” cellspacing=“2”> </table> </body>

  5. Practice – Creating a Table • Download kpaf.zip from my website. • Go to the morning.htm and insert links to the kpaf2.css and programs.css style sheets. • Scroll down the file and directly below the paragraph element, insert a table with a 1px border, 0px cellspacing, and 3px cellpadding. • Add the class name programs to the table.

  6. Inserting a Table Summary • The summary attribute allows you to include a detailed description about the table<table summary="description"> ... </table>

  7. Creating a Table Caption • To create a table caption, add the caption element directly below the opening <table> tag with the syntax <caption>content</caption> where content is the content of the table caption

  8. Practice – Table Summary and Caption • Insert the following summary for the table: Lists the morning programs aired by KPAF from 5:00 a.m. to 12:00 p.m. (central time). • Add a table caption containing the text All Times Central.

  9. Inside the table • <tr> </tr>: • Indicates the start and end of a table row • Rows consist of headings or data cells • <th> </th>: • Indicates the start and end of a table heading cell • Heading cells default to bold text and center-alignment • <td> </td>: • Indicates the start and end of a table data cell • Data cells default to normal text and left-alignment

  10. Practice – Rows and Cells • Add rows and cells so the table is similar to the following table:

  11. Using colspan and rowspan to merge cells in a table • colspan: Sets number of columns spanned by a cell • rowspan: Sets number of rows spanned by a cell • Example: <tr> <td colspan=“2”>I merge two cells horizontally.</td> </tr>

  12. Practice – Rowspan and Colspan • Create row- and column-spanning to match the layout of the days and times shown in Figure 5-53 on page HTML 378.

More Related