Tables Data in Rows and Columns What is

Tables: Data in Rows and Columns – – – What is Table? How Tables are Used? Designing Tables Table, Cell, Row Attributes Using Tables for Alignment When Tables Go Wrong? 1

Objectives – Insert a table into an HTML document – Manipulate the style, color, and width of a table’s border – Set the size of a table’s margin, cell spacing, and cell padding – Change a table’s width within the browser pane and cell width within the table – Use background colors within a table – Float text to the right or left of a table – Place captions above and below a table – Using Tables for Alignment – When Tables Go Wrong? 2

What is Table? Tables consist of horizontal rows and vertical columns which can be formatted according to your needs. The intersection of a row and a column is called a cell. HTML cells contain either data, numbers, text, an image -or header information describing the data in a column or row. C ROW L U M N 3

How Tables are Used? Organize information in a row and column format (Present tabular information) Present any type of information for which you want a lot of control over the positioning the material (Newspaper-like appearance; Control Layout) 4

Table Containers <table>. . </table> <th>. . . . </th> <tr>. . </tr> <td>. . </td> <caption>. . . </caption> defines encloses the table defines the table headers the table rows surrounds the actual table data allows you to place a caption either above or below the table. The latest HTML specifications added five new table tags that let you format table columns and format and scroll portions of long tables <tbody>. . </tbody> (*) <thead>. . . </thead> (*) <tfoot>. . . . </tfoot> (*) <colgroup>. . </colgroup> (*) <col/> (*) identifies a scrollable area of a table appears above the scrolling body appears belove the scrolling body provides means for combining a group of columns in a table allows you to control the appearance or attribute specifications for one or more tables 5

Designing Tables <TABLE> <TR> <TD>Row 1, Column 1</TD> <TD>Row 1, Column 2</TD> </TR> <TD>Row 2, Column 1</TD> <TD>Row 2, Column 2</TD> </TR> </TABLE> Cell 1(R 1 C 1) Cell 2 (R 1 C 2) Cell 3 (R 2 C 1) Cell 4 (R 2 C 2) Cell 1 : Row 1, Column 1 Cell 2 : Row 1, Column 2 Cell 3 : Row 2, Column 1 Cell 4 : Row 2, Column 2 1. For each ROW, begin with <TR>, end with </TR> 2. For each CELL in a Row, begin with <TD>, end with </TD> 3. No problem if you have 1 ROW, many CELLS. 4. When you have more than 1 ROWS, might be a Problem. Why? Because, number of CELLS must be SAME at each ROW. Rule of MATRIX. 6

Table, Row, Cell Attributes < Table width height cellspacing cellpadding bordercolor background bgcolor align rules(*) = = = = = frame(*) (none: just outside, column: just columns) = “border” which sides of a table’s border are visible [box, void, above, below, hsides, hand side), rhs. ] vsides, lhs (left "100%“ (you may use percentage of window or pixel ) “ 5" "3" "2" "#008000" "bilkent. gif" "#C 0 C 0 C 0“ "right" “row” controls the border around individual cell > 7

Table, Row, Cell Attributes < tr width height bordercolor background bgcolor align valign = = = = "100%“ (you may use percentage of window or pixel ) “ 5" "2" "#008000" "bilkent. gif" "#C 0 C 0 C 0“ "right" “right” width height bordercolor background bgcolor align valign = = = = "100%“ (you may use percentage of window or pixel ) “ 8" "2" "#008000" "bilkent. gif" "#C 0 C 0 C 0“ "right" “right” > < td > 8

Using Tables for Alignment Q 1. Assume that write the name of the lecture on Left alignment. write the date on Right alignment. BOTH must be on the same LINE. Once you give an ALIGMENT property to a line, it will set the whole LINE’s property. So, you need to GIVE 2 different ALIGNMENT PROPERTY at 1 LINE. Using TABLES is the best way to solve this Problem. Lecture 63242 25. 10. 2004 <table width=“ 100%”> <tr> <td width=“ 50%” align=“left”>Lecture 63242</td> <td width=“ 50%” align=“right”> 25. 10. 2004</td> </tr> </table> 9

Using Tables for Alignment Q 2. Assume that insert an image named bilkent. gif. write the date near the image. They must be vertically CENTERED as shown in the figure. 25. 10. 2004 Once you insert an image, write a text after it, the text’s bottom will be same level as image’s one. But, you want it to be centered. Using TABLES is the best way to solve this Problem. 25. 10. 2004 <table width=“ 100”> <tr> <td width=“ 70”> <img src=“bilkent. gif”></td> <td width=“ 30” valign=“middle”>25. 10. 2004</td> </tr> </table> 10

When Tables Go Wrong? • If you don’t CLOSE your Table TAGS; table, tr, td Assume that you want to build a table, with 2 rows, and 3 columns. The browser will understand this table’s dimensions by TAGS, so they must be defined correctly • If the CELL numbers are not equal at each ROW. If you create a COLUMN, it must be valid for each ROW. ? ? Is there any way to OMIT, MERGE cells ? ? YES, you should merge cells by using COLSPAN and ROWSPAN tag attributes. However, you don’t need to use them with non-authoring tools. 11