Html tables

This presentation will describe about the HTML table tags.

1. COMPUTER APPLICATIONS CLASS X (Code 165) TOPIC: UNIT 2: HTML Tables By HIMANSHU PATHAK

2. Contents Introduction Basic HTML Table Tags Table Attributes

3. Introduction HTML tables allow web developers to arrange data into rows and columns . HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc.  Tables can be used to compare two or more items in tabular form layout. Tables are used to create databases .

4. Defining Tables in HTML An HTML table is defined with the “table” tag. Each table row is defined with the “ tr ” tag. A table header is defined with the “ th ” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag . The  ”caption”  tag will serve as a title or explanation for the table and it shows up at the top of the table.

5. Example <table> < tr > < th >Name</ th > < th >Contact</ th > </ tr > < tr > <td> Pathak </ td> <td>9988776655</ td> </ tr > </ table>

6. Table Tag Attribute Border attribute : We can use border attribute of table tag in HTML to specify border. But it is not recommended now . <table  border="1 " > If you do not need a border, then you can use border = "0".

7. Cellspacing & Cellpadding There are two attributes called cellspacing and cellpadding which will use to adjust the white space in table cells. The cellspacing attribute defines space between table cells. cellpadding represents the distance between cell borders and the content within a cell . < table cellpadding = "5" cellspacing = "5">

8. Colspan & Rowspan We will use   colspan attribute if we want to merge two or more columns into a single column. Similar way we will use  rowspan  if we want to merge two or more rows. <table border = "1"> < tr > < th >Period 1</ th > < th >Period 2</ th > < th >Period 3</ th > </ tr > < tr > < td rowspan = "2 " > Python </ td> <td>HTML</ td> <td>Computer</ td> </ tr > < tr > <td>Computer</ td> <td>HTML</ td> </ tr > < tr > < td colspan = “2” >Python Lab</ td> < td>Library</ td> </ tr > </ table>

9. Tables Background bgcolor  attribute − We can set background color for whole table or just for one cell. background  attribute − We can set background image for whole table or just for one cell. We can also set border color also using bordercolor attribute. Note  − The  bgcolor ,  background , and  bordercolor  attributes deprecated in HTML5. <table border = " 1“ bordercolo r = “red" bgcolor = "yellow" > < tr > < th >Period 1</ th > < th >Period 2</ th > < th >Period 3</ th > </ tr > < tr > <td rowspan = "2" > Python </td> <td>HTML</td> <td>Computer</td> </ tr > < tr > <td>Computer</td> <td>HTML</td> </ tr > < tr > <td colspan = “2" >Python Lab</td> <td>Library</td> </ tr > </table>

10. Table Height & Width You can set a table width and height using  width  and  height  attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area. < table border = "1" width = “400” height = “200” > < tr > < th >Period 1</ th > < th >Period 2</ th > < th >Period 3</ th > </ tr > < tr > <td rowspan = "2" > Python </td> <td>HTML</td> <td>Computer</td> </ tr > < tr > <td>Computer</td> <td>HTML</td> </ tr > < tr > <td colspan = “2" >Python Lab</td> <td>Library</td> </ tr > </table>

11. Summary HTML Table Table Defining Tags and their attributes In the next class, we will start Unit II – HTML Forms in detail. Thanks