In this chapter you will learn How to create tables in HTML

1. Fundamentals of Web designing
Ministry of Higher Education
Bamyan University
Computer Science Department
1
Presented by : Mustafa Kamel Mohammadi
Email : bamian.cs@gmail.com
Working tables in HTML

2. learning objective
 In this chapter you will learn
 How to create tables in HTML
2

3. Tables in HTML
 Table is a structured element that consists of rows and columns of cells
 The <table> and </table>tags define where the table begins and ends
 The <tr>and </tr> tags define where each row begins and ends
 The <td>and </td>tags define the individual cells within each row.
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
</table>
3

4. Table borders and cell spacing, padding
 To add border around table you can use “border” attribute
 To control spaces between cells in a table, use “cellspacing” attribute
 To control space between cell and its internal content use “cellpadding”
<table border=”2” cellspacing=”10” cellpadding=”10” bordercolor=”#FF0000”>
</table>
4

5. Spanning columns an rows
 To span a cell across columns use “Colspan” attribute in <td> tags
 It take a numeric value, the value indicates the number of columns
 To span a cell across columns use “rowspan” attribute in <td> tags
 It take a numeric value, the value indicates the number of rows
<td colspan=”3”> 1 </td>
<td rowspan=”3”> 1 </td>
5

6. Table alignment and dimension
 To align table in respect to texts around it, set “align” attribute for <table> tag to
(left, right, center)
 To align content of cell set “align” attribute for <td> tag.
 We can also set width and height for tables using “width” and “height” attr.
<table align=“left” width=“800” height=“400” >
</table>
6

7. Background color of table
 Use “bgcolor” attribute to set background color for <td>, <tr>,<table>
<table bagcolor=“cyan”>
<tr bgcolor=“red”>
<td bfcolor=“blue”></td>
</tr>
</table>
7

8. Logical structure of table
<table>
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr><td></td><td></td></tr>
</tbody>
<foot>
<tr><td colspan=2></td></tr>
</tfoot>
</table>
8

9. 9

10. References
• “HTML 4 dummies 5th edition” by Ed Tittel & Mary Burmeister
• “HTML 5 designing rich internet applications” by Mathew Dawid
• “HTML in ten simple steps” by Robert G. fuller
10