Lecture 10Web Programming

Introducing Web Tables

Tabulating items

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

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

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

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

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

Hands-on Practice #1

Hands-on Practice #2

All times listed in central time