110 likes | 268 Views
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
E N D
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 </tr> </table>
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
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
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>
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
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
Cell Alignment • The text in the cell is left-aligned, in the center of the cell (vertically) Cell Text
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
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.