Html tables
- 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.
- 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“ bordercolor = “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