1. Introducing Web Tables

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

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

4. 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

5. 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

6. 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

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

8. 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

9. 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

10. 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

11. 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>

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

13. 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

14. 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>

15. 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

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

17. Formatting the appearance of HTML Tables…

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

19. <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

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

21. <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

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>
the height attribute
<table height="value"> ... </table>

23. Formatting Table Borders

24. 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

25. Formatting Table Borders (contd.)

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

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

28. 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

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

30. Practice Exercise
Rest of the table

31. Activating cells for links
<td> <a href=" Page</a> </td>

32. 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>

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

34. Implement in class:Table inside a table