HTML Tables
HTML Table
• The <table> tag begins the table, place what want inside and end the
table with the </table> tag. To begin adding contents to table, need the
<tr> and <td> tags.
• The <tr> stands for table row and the <td> stands for table data, which is
what will place after <table> tag. End a table, data section with the </td>
tag and each table row with the </tr> tag.
2
Example
<table>
<tr>
<td>
This is my table!
</td>
</tr>
</table>
3
Cont..
<body>
Hi!
<table border="2">
<tr>
<td>
This is my table!
</td>
</tr>
</table>
</body>
4
Example
<body>
Hi!
<table border="2">
<tr>
<td>This is cell 1</td>
<td>This is cell 2</td>
</tr>
</table>
</body>
5
Cont..
td
<body>
Hi! tr row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
<table border=“9">
<tr>
<td>row 1, cell 1</td> A table is divided into rows (with the
<td>row 1, cell 2</td> <tr> tag)
</tr>
<tr> Each row is divided into data cells (with
<td>row 2, cell 1</td> the <td> tag). td stands for "table data,"
<td>row 2, cell 2</td> and holds the content of a data cell
</tr>
A <td> tag can contain text, links,
</table>
images, lists, forms, other tables, etc.
</body> 6
HTML Table Headers
• Header information in a table are defined with the <th> tag
• All major browsers display the text in the <th> element
as bold and centered
• <table border="1">
<tr>
<th>Header 1</th> Header 1 Header 2
<th>Header 2</th> row 1, cell 1 row 1, cell 2
</tr> row 2, cell 1 row 2, cell 2
<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>
7
Exercise
Fruit Percentage
Bananas 23%
Oranges 13%
Other 10%
8
Cell Padding and Spacing
• With the cellpadding and cellspacing attributes, you will be able to
adjust the spacing between table cells
• Setting the cellpadding attribute determines how much space will exist
between a table cell border and the elements contained within it, whereas
cellspacing determines how much space will exist between each table
cell
• Place a number inside the quote mark
Cellpadding=“”
Cellspacing=“”
9
Cont..
<table border =“2” cellpadding=“15” >
<tr>
<td><b>Column 1</b> </td>
<td><b>Column 2</b> </td>
</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>
10
</table>
Cont..
<table border =“2” cellpadding=“15” cellspacing=“15” >
<tr>
<td><b>Column 1</b> </td>
<td><b>Column 2</b> </td>
</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>
11
</table>
Table width & height
<table border=“2” bordercolor=“red” width=“600” height=“500” >
<tr>
<td>
This table really long !
</tr>
</td>
</table>
12
Cont..
<table border=“2” bordercolor=“red” width=“100%” height=“70%” >
<tr>
<td>
This table really long !
</tr>
</td>
</table>
13
align
• align=“left”
Aligns cell contents to the left
• align=“center”
Aligns cell contents to the center
• align=“right”
Aligns cell contents to the right
14
Cont..
<table width=“450” border=“2” cellspacing=“7”
cellpadding=“7”>
<tr>
<td align="center">
I’m in the center !
</td>
<td align="right">
I’m aligned to the right!
</td>
</tr>
</table> 15
valign
• Valign=“top”
Align contents to the top of the cell
• Valign=“middle”
Align contents halfway between the top and bottom of the cell
• Valign=“bottom”
Align contents to the bottom of the cell
16
Cont..
<table width=“550” border=“2” cellspacing=“7” cellpadding=“0”>
<tr>
<td align="center" valign="top">
I’m on top! <br/>
so,I start on top!
</td>
<td align="center" valign="middle">
I’m in the middle!
</td>
<td align="center" valign="bottom">
I start at the bottom!
</td>
</tr>
</table> 17
bgcolor
<table border=“5” bgcolor="red">
<tr>
<td>
Red Rules!
</td>
</tr>
</table>
18
Cont..
<table width="75" border=“2”>
<tr>
<td bgcolor="red">
Red
</td>
<td bgcolor="blue">
blue
</td>
</tr>
</table>
19
Cont..
<table width="200" border=“2”>
<tr bgcolor="red">
<td>Red</td>
<td>Red Again...</td>
</tr>
<tr bgcolor="blue">
<td>Blue</td>
<td>Blue Again... Again...</td>
</tr>
</table>
20
Rowspan = “ ”
• Defines the number of vertical table rows the cell should
take up. Place number inside the quote marks
21
Example 01
<table border="2">
<tr>
<td align="center">
Nice guy,Idn' he?
</td>
<td rowspan="2" align="center">
rowspan
</td>
</tr>
<tr>
<td align="center">
Met him at the shop
</td>
</tr>
</table> 22
Example 02
<table border="1" >
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td rowspan="2">d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
</tr>
23
</table>
Exercise
<table border="1" >
<tr>
<td rowspan ="3">m</td>
<td>h</td>
<td>y</td>
</tr>
<tr>
<td>p</td>
<td rowspan="2">e</td>
</tr>
<td>r</td>
</tr>
</table> 24
Colspan = “ ”
• Defines the number of horizontal columns the cell
should take up
• Place number inside the quote marks
25
Example 01
<table border="1" cellpadding="5" >
<tr>
<td colspan="3" align="center"><b>Table header</b>
</tr>
<tr>
<td align="center">Table cell 1</td>
<td align="center">Table cell 2</td>
<td align="center">Table cell 3</td>
</tr>
</table>
26
Example 02
<table border="1">
<tr>
<td colspan="3">s</td>
</tr>
<tr>
<td>s</td>
<td>s</td>
<td>s</td>
</tr>
<tr>
<td colspan="2">s</td>
<td>s</td>
</tr>
</table> 27
Exercise
<table border="1" width="100">
<tr>
<td colspan="2">a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td rowspan="2">f</td>
<td rowspan="3">g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
</tr>
<tr>
<td colspan="2">j</td>
28
<td>k</td>
<tr title=“ ”>
<table border="1">
<tr title="You are looking at Row 1” bgcolor="silver">
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr title="You are looking at Row 2" bgcolor="aqua">
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2 29
Table within tables
<table width="25%" border="6">
<tr>
<td align="center">
<table width="75%" border="2">
<td align="center">I'm inside the small table!</td>
</table>
</td>
</tr>
</table>
30
31
