Handout5 tables

WEBPROG1-Web Programming 1(HTML) Prelim Period Handout 5HTML Tables Tables may seem difficult at first, but after working through this lesson youll seehow they arent too bad. The <table> tag is used to being the table. Within a tableelement are the <tr> (table rows) and <td> (table columns) tags. Tables are ahandy way to create a sites layout, but it does take some getting used to. Hereshow to make a table.Code:<table border="1"><tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr><tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr></table>Display:Row 1 Cell 1 Row 1 Cell 2Row 2 Cell 1 Row 2 Cell 2 Content is placed within tables cells. A table cell is defined by <td> and </td>.The border attribute defines how wide the tables border will be.Spanning Multiple Rows and Cells Use rowspan to span multiple rows and colspan to span multiple columns. Note: if you would like to place headers at the top of your columns, use the<th> tag as shown below. By default these headers are bold to set them apart fromthe rest of your tables content.Code:<table border="1"><th>Column 1</th><th>Column 2</th><th>Column 3</th><tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr><tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr><tr><td colspan="3">Row 3 Cell 1</td></tr></table>Display: Column 1 Column 2 Column 3 Row 1 Cell 2 Row 1 Cell 3Row 1 Cell 1 Row 2 Cell 2 Row 2 Cell 3Row 3 Cell 1Prepared By: RICHARD F. ORPIANO Page 1 of 2

WEBPROG1-Web Programming 1(HTML) Prelim Period Handout 5 Cell Padding and Spacing With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within. Color has been added to the table to emphasize these attributes. Code: <table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> <th>Column 1</th> <th>Column 2</th> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> Display: Column 1 Column 2Row 1 Cell 1 Row 1 Cell 2Row 2 Cell 1 Row 2 Cell 2 And now we will change the cellpadding of the table and remove the cellspacing from the previous example. Code: <table border="1" cellpadding="10" bgcolor="rgb(0,255,0)"> <th>Column 1</th> <th>Column 2</th> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table> Display: Column 1 Column 2 Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 The value you specify for padding and spacing is interpreted by the browser as a pixel value you. So a value of 10 is simply 10 pixels wide. Most attributes that use numeric values for their measurements use pixels. Prepared By: RICHARD F. ORPIANO Page 2 of 2

Handout5 tables

by Nadine Guevarra

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Handout5 tables Document Transcript