Introducing Web Tables Tabulating items Adv of Tables

Introducing Web Tables

Tabulating items Adv. of Tables: q. Better readability q More flexibility q More efficient to explain information than plain text

A snapshot of HTML Table Helps us to layout the html page in a nice format

How to create HTML Tables? q What are the questions we need to ask ourselves? q What is the tag for that? v <table>…</table> q What else? q A Table must have rows and each of the rows must be divided into cells q add a row v <tr>…</tr> q add a cell (column) v <td>…</td> q That’s it! Let’s build a simple table then…with 2 rows and 2 cells in each row

Code to create HTML Table <table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Sometimes, this looks nice. But sometime, you may need the actual lines

Actual lines = border (attribute) <table border=“ 1”> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> How can I add borders? Width of the borders row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Simple Exercise #1 q Let’s build a simple table with 3 rows and 2 cols.

How about headings in this table? Heading 1 Heading 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tag for heading? ? <th> … </th> cell content is made bold and centered <table border=“ 1”> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

More design of tables fruits apple orange Phone Contact Fax q Spanning rows and columns v A spanning cell is a single cell that occupies more than one row or one column in the table q Attributes v COLSPAN: allows a cell span multiple columns v ROWSPAN: allows a cell span multiple rows

How to create column span? q COLSPAN: allows a cell span multiple columns q example <th <table border=“ 1”> <tr> <td colspan=“ 2”> fruits </td> </tr> </th> <td> apple </td> <td> orange </td> </tr> </table> fruits apple orange

ROWSPAN q ROWSPAN: allows a cell span multiple rows q example <table border=“ 1”> <tr> <th rowspan=“ 2”> contact </th> <td> phone </td> </tr> <td> fax </td> </tr> </table>

Creating a Table caption q Caption is a part of Table describing the content of the table in a line

Creating a Table Caption q To create a table caption, add the caption element directly below the opening <table> tag with the syntax <caption> content </caption> where content is the content of the table caption you want to display in the webpage

Caption code q <caption> … </caption> q example <table border=“ 1”> <caption> My contact info </caption> <tr> <th rowspan=“ 2”> contact </th> <td> phone </td> </tr> <td> fax </td> </tr> </table>

Positioning a Table Caption q By default, table captions are placed at the top q Change the placement using “align” attribute <caption align =“position”> content </caption> where position can be top / bottom / left / right

Practice Exercise q Write html code to create this table: All times listed in central time

Formatting the appearance of HTML Tables…

Formatting Table appearance q Cell padding v space between the cell contents and the cell border

Cellpadding q To define the padding within table cells, add the attribute <table cellpadding="value">. . . </table> to the table element, where value is the size of the padding space in pixels

Formatting Table appearance (contd. ) q Cell spacing v The amount of space between table cells is known as the cell spacing

Cellspacing q To define the space between table cells, add the attribute <table cellspacing="value">. . . </table> to the table element, where value is the space between table cells in pixels

Width and Height of Table q To set the width of the table to a specific value, add the width attribute <table width="value">. . . </table> q the height attribute <table height="value">. . . </table>

Formatting Table Borders

Formatting Table Borders with HTML Attributes q A table frame specifies which sides of the table (or which sides of the table cells) will have borders <table border ="value" frame ="type">. . . </table> frame values above below border hsides | lhs | rhs vsides void

Formatting Table Borders (contd. )

Formatting internal gridlines q A table rule specifies how the internal gridlines are drawn within the table <table border ="value" rules ="type">. . . </table>

Table Border Color q The borders can be colored using bordercolor attribute q <TABLE BORDER=“ 10” BORDERCOLOR=“RED”>

Formatting cell content q By default, browsers horizontally center the contents of table header cells and left-align the contents of table data cells q But what if we want center-alignment of content? Marcia Carol Greg Jan Alice Peter Cindy Mike Bobby

Formatting Tables with HTML Attributes v v v To control the horizontal alignment align="position“ To control the vertical alignment valign="position“ position = top / middle / bottom

Practice Exercise q Rest of the table

Activating cells for links <td> </td> <a href="http: //google. com">Google Page</a>

Color in a table q What if you want to color the table cells? v Apply attribute bgcolor=“value” to the <td> tag q What if you want to change the text color? <td BGCOLOR=“red"> <FONT COLOR=“blue">Blue Stars</FONT> </td>

Images in cells <td align= "center"> <IMG SRC=“streetsign. jpg“ alt=“logo”> </td>

Implement in class: Table inside a table