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

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 thehtml page in a nice

format

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

How to create HTML Tables?

<table><tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td></tr><tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td></tr>

</table>

Code to create HTML Table

row 1, cell 1

row 2, cell 2row 2, cell 1

row 1, cell 2

row 1, cell 1

row 2, cell 2row 2, cell 1

row 1, cell 2

Sometimes, this looks nice. But sometime, you may need the actual lines

<table border=“1”><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>

</table>

Actual lines = border (attribute)

row 1, cell 1

row 2, cell 2row 2, cell 1

row 1, cell 2

How can I add borders?

Width of the borders

Let’s build a simple table with 3 rows and 2 cols.

Simple Exercise #1

How about headings in this table?

row 1, cell 1

row 2, cell 2row 2, cell 1

row 1, cell 2

Heading 1 Heading 2

<table border=“1”> <tr>

<th>Heading 1</th>

<th>Heading 2</th></tr><tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td></tr><tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td></tr>

</table>

Tag for heading??

<th> … </th>

cell content is made bold and centered

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

More design of tables

fruits

apple orange

ContactPhone

Fax

COLSPAN: allows a cell span multiple columns

example <table border=“1”>

<tr>

<td colspan=“2”> fruits </td>

</tr>

<tr>

<td> apple </td>

<td> orange </td>

</tr>

</table>

How to create column span?

fruits

apple orange

fruits

apple orange

<th

</th>

ROWSPAN: allows a cell span multiple rows

example <table border=“1”>

<tr>

<th rowspan=“2”> contact </th>

<td> phone </td>

</tr>

<tr>

<td> fax </td>

</tr>

</table>

ROWSPAN

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> … </caption>

example<table border=“1”>

<caption> My contact info </caption>

<tr>

<th rowspan=“2”> contact </th>

<td> phone </td>

</tr>

<tr>

<td> fax </td>

</tr>

</table>

Caption code

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 betop / 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

Cellpadding

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

Cellspacing

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”>

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?

Formatting cell content

Marcia Carol Greg

Jan Alice Peter

Cindy Mike Bobby

Formatting Tables with HTML Attributes

To control the horizontal alignmentalign="position“

To control the vertical alignmentvalign="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