Download presentation
Presentation is loading. Please wait.
1
H T M L A B E S X P I N D
2
What is a TABLE? The HTML table allows web designers to arrange & organize data -- text, images, hyperlinks, forms, 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
3
TABLE: Components Basic HTML table tags:
<table></table> required Defines the beginning and end of the table <tr></tr> required Table Row - Defines the beginning and end of a horizontal row. <td></td> required 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
4
TABLE: Components Cont.
Additional HTML table tags: <th></th> optional Defines a table header row. Used instead of “td.” Text is bold & centered within the cell <caption></caption> optional 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>1st</td><td>PE</td></tr> <tr><td>2nd</td><td>Math</td></tr> </table> Browser View My Schedule Period Class 1st PE 2nd Math
5
<TR> <TD> 1</TD> <TD> 2</TD> </TR>
6
<TR> <TH>1</TH> <TH>2</TH> </TR> <TD>3 </TD> <TD>4</TD> 1 2 3 4
7
The General Table Syntax
<tr> <td> First Cell </td> <td> Second Cell </td> </tr> <td> Third Cell </td> <td> Fourth Cell </td> </table> two rows two columns
8
A Table Structure with a Row-Spanning Cell
HTML code resulting table four table cells in the first row only three table cells are required for the second and third rows
9
TABLE TITLE Column A Column B Data1 Data 2
<TR> <TH COLSPAN="2“>TABLE TITLE</TH> </TR> <TR> <TD>Column A</TD> <TD>Column B</TD> </TR> <TR > <TD>Data 1</TD> <TD>Data 2</TD> </TR>
10
TABLE HEADER TABLE CELL 1 TABLE CELL 2 <TR> <TH ROWSPAN="2“ >TABLE HEADER</TH> <TD>TABLE CELL 1 </TR> <TD>TABLE CELL 2</TD>
11
<TR> <TD COLSPAN=4 >The Brady Bunch </TD> <TD ROWSPAN=3 >Cast <TD>Marcia <TD>Carol <TD>Greg </TR> <TD>Jan <TD>Alice <TD>Peter <TD>Cindy <TD>Mike <TD>Bobby
12
REVIEW: HTML tables Code Browser View
<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”>1st</td> <td>Web Design</td></tr> <tr><td align=“center”>2nd</td><td>Social Studies</td></tr> <tr><td colspan=“2”>Lunch</td></tr> <tr><td align=“center”>3rd</td><td>English</td></tr> </table> table header Browser View align center cell spacing table border column span cell padding
13
Adding Spanning Cells to a Table
14
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>
15
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>
Similar presentations
