Introducing Web Tables

Tables for tabulating items

Better looking More flexibility More efficient to explain information than plain text

A snapshot of HTML Table

Each table in a Web page follows a basic structure consisting of the table element and a collection of table rows nested in the table element

What are the questions we need to ask ourselves?

What is the tag for creating table element?<table> ...</table>

What else? A Table must have rows and each of the rows

must be divided into cells

How to create HTML Tables?

How to add rows?

<table><tr>

table cells</tr><tr>

table cells</tr>...

</table>

How to create HTML Tables?

Table Cells Table headings, the

cells that identify the header contents marked using a <th> tag

Data cells marked with the <td>

tag and are used for any content that is not considered a heading

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

10

How about headings in a tables?

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

11

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 two columns ROWSPAN: allows a cell span two rows

More design of tables

fruits

apple orange

ContactPhone

Fax

12

COLSPAN: allows a cell span two columns

example <table border=“1”>

<tr>

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

</tr>

<tr>

<td> apple </td>

<td> orange </td>

</tr>

</table>

Attributes for cell tags

fruits

apple orange

fruits

apple orange

13

ROWSPAN: allows a cell span two rows

example <table border=“1”>

<tr>

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

<td> phone </td>

</tr>

<tr>

<td> fax </td>

</tr>

</table>

Attributes for cell tags (contd.)

Practice Exercise Write html code for this table

14

Creating a Table caption Caption is a part of Table describing the

content of the table in a line

15

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

16

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

17

Formatting the appearance of HTML Tables…

18

Formatting Table appearance

Cell padding space between the cell contents and the cell

border

19

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

20

Formatting Table appearance (contd.)

Cell spacing The amount of space between table cells is

known as the cell spacing

21

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

22

Width and Height of Table

To set the width of the table to a specific value, add the width attribute

<table width="value"> ... </table>

Many browsers also support the height attribute

<table height="value"> ... </table>

23

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>

24

Formatting Table Borders (contd.)

25

Formatting internal gridlines

A table rule specifies how the internal gridlines are drawn within the table

<table border ="value" rules ="type"> ... </table>

26

Practice Exercise #2 Rest of the table

27

Formatting Tables with HTML Attributes By default, browsers horizontally center the

contents of table header cells and left-align the contents of table data cells

To control the horizontal alignmentalign="position“

To control the vertical alignmentvalign="position“

position = top / middle / bottom

28