1 / 11

Tutorial 4

Tutorial 4. Designing a Web Page with Tables. The syntax for a 3-row, 2 cells per row table is:. <table> <tr> <th></th><th></th> This row is for headings (bold and centered) </tr> <tr> <td></td> <td></td> The first row </tr> <tr> <td></td> <td></td> The second row

bowen
Download Presentation

Tutorial 4

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 4 Designing a Web Page with Tables

  2. The syntax for a 3-row, 2 cells per row table is: <table> <tr> <th></th><th></th> This row is for headings (bold and centered) </tr> <tr> <td></td> <td></td> The first row </tr> <tr> <td></td> <td></td> The second row </tr> </table>

  3. The text in headings is always bold and centered by default • The text in other cells is left-aligned by default and not bold • You can create a caption for your table by <caption>”The Caption”</caption>. This goes immediately after the table tag

  4. Borders • Every table has a border (in pixels) <table border = 10> gives you a border of 10 pixels, <table border = 0> gives you no border at all

  5. Cell Spacing & Padding • Cell spacing is the space between cells (see fig 4-20, page 4.16) • The spacing attribute goes in the table tag <table cellspacing = 10> • Cell padding is the space around the text within the cell (see fig 4-23, page 4.17) • The padding attribute goes in the table tag <table cellspacing = 10 cellpadding = 5>

  6. Frames & Rules • The frame attribute lets you determine which sides of the table will have borders • The rules attribute lets you control how the gridlines are drawn • See page 4.19 for the diagrams

  7. Table Size • You can specify an absolute height and width for the table (in pixels) <table height = 400 width = 400> • If you want the table to be the width of the screen, you can say <table width = “100%”> • Maybe you want to occupy half the width of the screen, centered <center><table width = 50%> • You can also set the width and height of an individual cell within the td tag or the th tag

  8. Cell Alignment • The text in the cell is left-aligned, in the center of the cell (vertically) Cell Text

  9. Align and valign • These attributes help you to control alignment and vertical alignment • align may be left, right, center • Valign may be top, middle, bottom • See page 4.24, fig 4-33

  10. Lab • Complete the exercises in the gray boxes on pages 4.07, 4.08, 4.09, 4.10, 4.12, 4.15, 4.16, 4.18, 4.21, 4.23, 4.25. • Read the rest of the chapter, completing the tutorial. • Homework due Sat 18th, midnight: Finish the tutorial. Complete case 1.

  11. Table Caption

More Related