What is a TABLE The HTML table allows

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

TABLE: Tag attributes • Attributes that can be added to table tags: o Table Border optional o Table border attribute dictates border thickness o Example: <table border=“ 1”> o 0 = no border & larger numbers = thicker borders o No border defined = no border viewable o bordercolor can be added to change the color of the table border. Border must be >0 to see the color o Example: <table border=“ 1” bordercolor=“red”> o Table Width & Height optional o Width & Height can be defined in the open table tag o Example: <table width=“ 100” height=“ 100”> o The height attribute is widely supported, but isn't actually part of the official HTML standard. It may not always work as you expect. o If no size values are specified, the browser will decide on an appropriate size. Results will vary between browsers.

TABLE: Tag attributes cont. • Additional attributes that can be added to table tags: o Cell Padding optional o Defines the space inside each cell, i. e. the space between the edges of the cell and the content within it. o Example: <table border=“ 1” cellpadding=“ 10” bordercolor=“red”> o Cell Spacing optional o Defines the space between cells. If a border is used, the spacing will widen the border. o Example: <table border=“ 1” cellspacing=“ 10” bordercolor=“green”> o These attributes apply to the entire table - you can't specify spacing or padding for individual cells.

TABLE: Tag attributes cont. • Attributes that can be added to th, tr, & td tags: o Alignment optional o Alignment can be added to the table, tr, th, & td tag. o If applied to the table tag, the entire table will align. Code o If applied to the tr tag, the entire row will align. o If applied to the th or td tag, just the cell will align. o Alignment options: left, center, & right o Contents will left align by default <table border=“ 1”><tr align=“right”> <td>Test 1</td><td>Test 2</td></tr><tr> <td>Test 3</td><td>Test 4</td></tr></table> Browser View Test 1 Test 3 Test 2 Test 4 o Column & Row span optional Code o Column span (colspan) is added to a th or td tag o Row span (rowspan) can added to the tr tag Browser View <table><tr><td colspan=2>Heading</td></tr> <tr><td>Entry 1</td><td>Entry 2</td></tr></table> Heading Entry 1 Entry 2

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

Link • Link to web site – <a href= “http: //www. ucf. edu”> Link to UCF </a> • Link to document <a href=“http: //www. eecs. ucf. edu/images/building. jpg”>Link</a> • Email link <a href= “mailto: name@domain. com”> Link to email </a>

Include a Picture • • • <img src=“FILENAME” /> <img src=“FILENAME” alt=“text” /> E. g. <img src=“logo. gif” alt=“Google logo” /> <img src=“logo. gif” />

target attribute <a href="help. html" target="_blank">Show Help (opens new window)</a> • _blank-Load in a new window • _self-Load in the same frame as it was clicked • _parent-Load in the parent frameset • _top-Load in the full body of the window

<Optgroup> TAG The <optgroup> is used to group related options in a dropdown list. <select> <optgroup label="Swedish Cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>

<span> tag It is used to color a part of a text: <p>My mother has <span style="color: blue">blue</span> eye s. </p> My mother has blue eyes