Introducing Web Tables

Tabulating items Adv. of Tables: Better readability More flexibility 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? What are the questions we need to ask ourselves? What is the tag for that? <table>…</table> What else? A Table must have rows and each of the rows must be divided into cells add a row <tr>…</tr> add a cell (column) <td>…</td> That’s it! Let’s build a simple table then…with 2 rows and 2 cells in each row

Code to create HTML 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> </table> row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 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) How can I add borders? <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> </table> Width of the borders row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

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

How about headings in this table? <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> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </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

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

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

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

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

Creating a Table Caption 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 <caption> … </caption> example <table border=“1”> <caption> My contact info </caption> <tr> <th rowspan=“2”> contact </th> <td> phone </td> </tr> <td> fax </td> </table>

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

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

Formatting the appearance of HTML Tables…

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

<table cellpadding="value"> ... </table> 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.) Cell spacing The amount of space between table cells is known as the cell spacing

<table cellspacing="value"> ... </table> 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 To set the width of the table to a specific value, add the width attribute <table width="value"> ... </table> the height attribute <table height="value"> ... </table>

Formatting Table Borders

Formatting Table Borders with HTML Attributes 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 A table rule specifies how the internal gridlines are drawn within the table <table border ="value" rules ="type"> ... </table>

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

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

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

Practice Exercise Rest of the table

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

Color in a table What if you want to color the table cells? Apply attribute bgcolor=“value” to the <td> tag 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