H TML TAB L E S E X

H TML TAB L E S E X P L A I NED

What is a TABLE? • The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, form fields, other tables, etc. • Tables are made up of rows and columns. --Rows are horizontally arranged cells --Columns are vertically arranged cells 1 COLUMN 1 ROW

TABLE: Components • Basic HTML table tags: o <table></table> required o. Defines the beginning and end of the table o <tr></tr> required o. Table Row - Defines the beginning and end of a horizontal row. o <td></td> required o. Table Cell - Defines an individual cell. Cells are always placed inside a row. “td” stands for table data. Code <table> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> Browser View 1 2 3 4

TABLE: Components Cont. • Additional HTML table tags: o <th></th> optional o Defines a table header row. Used instead of “td. ” o Text is bold & centered within the cell o <caption></caption> optional o Sets a caption for the table. Goes after the table tag but not inside “tr” or “td. ” There should be only one caption per table. Appears centered above the table. Code <table> <caption>My Schedule</caption> <tr><th>Period</th><th>Class</th></tr> <tr><td>1 st</td><td>PE</td></tr> <tr><td>2 nd</td><td>Math</td></tr> </table> Browser View My Schedule Period Class 1 st PE 2 nd Math

<TR> <TD> 1</TD> <TD> 2</TD> </TR> 1 2

<TR> <TH>1</TH> <TH>2</TH> </TR> <TD>3 </TD> <TD>4</TD> </TR> 1 2 3 4

The General Table Syntax <table> <tr> <td> First Cell </td> <td> Second Cell </td> </tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table> two rows 7 two columns

A Table Structure with a Row-Spanning Cell four table cells in the first row only three table cells are required for the second and third rows HTML code 8 resulting table

TABLE TITLE Column A Column B Data 1 Data 2 <TR> <TH COLSPAN="2“>TABLE TITLE</TH> </TR> <TD>Column A</TD> <TD>Column B</TD> </TR> <TR > <TD>Data 1</TD> <TD>Data 2</TD> </TR>

TABLE HEADER TABLE CELL 1 TABLE CELL 2 <TR> <TH ROWSPAN="2“ >TABLE HEADER</TH> <TR> <TD>TABLE CELL 1 </TR> <TD>TABLE CELL 2</TD> </TR>

<TR> <TD COLSPAN=4 >The Brady Bunch </TD> <TR> <TD ROWSPAN=3 >Cast <TD>Marcia <TD>Carol <TD>Greg </TR> <TD>Jan <TD>Alice <TD>Peter <TR> <TD>Cindy <TD>Mike <TD>Bobby

REVIEW: HTML tables Code <table border=“ 10” bordercolor=“orange” cellspacing=“ 2” cellpadding=“ 3” width=“ 500”> <caption>My Schedule</caption> <tr><th>Period</th><th>Class</th></tr> <tr><td align=“center”>1 st</td> <td>Web Design</td></tr> <tr><td align=“center”>2 nd</td><td>Social Studies</td></tr> <tr><td colspan=“ 2”>Lunch</td></tr> <tr><td align=“center”>3 rd</td><td>English</td></tr> table header </table> Browser View align center cell spacing table border column span cell padding

Adding Spanning Cells to a Table 13

Row Color <HTML><HEAD> <TITLE>Simple Table</TITLE> </HEAD><BODY> <TABLE BORDER=3 CELLPADDING=3 ALIGN=CENTER> <TR BGCOLOR=YELLOW> <TD COLSPAN=3 ALIGN=CENTER >The Brady Bunch <TR><TD>Marcia<TD>Carol<TD>Greg <TR><TD>Jan<TD>Alice<TD>Peter <TR><TD>Cindy<TD>Mike<TD>Bobby </TABLE> </BODY></HTML>

Cell Color <HTML><HEAD> <TITLE>Simple Table</TITLE> </HEAD><BODY> <TABLE BORDER=3 CELLPADDING=3 ALIGN=CENTER> <TR><TD COLSPAN=3 ALIGN=CENTER>The Brady Bunch <TR><TD>Marcia<TD>Carol<TD>Greg <TR><TD>Jan <TD BGCOLOR=PINK>Alice<TD>Peter <TR><TD>Cindy<TD>Mike<TD>Bobby </TABLE> </BODY></HTML>