Web design - Working with tables in HTML

Web design - Working with tables in HTML

• 1.
  Fundamentals of Webdesigning 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  Inthis 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 andcell 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 anrows  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 anddimension  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 oftable  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 oftable <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 4dummies 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