1 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?

2 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?

3 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. ROW CLUMNCLUMN

4 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)

5 Table Containers....  encloses the table  defines the table headers  defines 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.... (*)  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

6 Designing Tables Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 1. For each ROW, begin with, end with 2. For each CELL in a Row, begin with, end with 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. Cell 1(R1C1)Cell 2 (R1C2) Cell 3 (R2C1)Cell 4 (R2C2) Cell 1 : Row 1, Column 1 Cell 2 : Row 1, Column 2 Cell 3 : Row 2, Column 1 Cell 4 : Row 2, Column 2

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

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

9 Using Tables for Alignment Q1. 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 Lecture

10 Using Tables for Alignment Q2. Assume that insert an image named bilkent.gif. write the date near the image. They must be vertically CENTERED as shown in the figure. 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

11 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.