HTML Table Annwesha Banerjee The table Element A
HTML Table Annwesha Banerjee
The table Element • A table can be created with the <table> element. • Every table starts with the <table> tag and ends with the </table> end tag. • <tr> and <td> tags are used for row and column
Example <table> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <td>cell 3</td> <td>cell 4</td> </tr> </table>
The border Attribute <table border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <td>cell 3</td> <td>cell 4</td> </tr> </table>
The cellspacing and cellpadding Attributes <html> <body><table cellspacing="10“ border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> </body> </html>
The cellspacing and cellpadding Attributes <html> <body><table cellpadding="10“ border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> </body> </html>
The thead, tfoot and tbody Elements • A HTML table can define a table head <thead> and a table foot <tfoot>. • In case of a page break when printing the page, these elements make sure, that the table head and the table foot will be shown automatically on each page.
The th Element • The th element defines a table header cell inside a table.
Colspan <html> <body><table border="1"> <tr> <td colspan="3" > 1 </td> <td> 4 </td> <td> 5 </td> </tr> <td> a </td> <td> b </td> <td> c </td> <td> d </td> <td> e </td> </tr> </table> </body> </html>
Rowspan <html> <body><table border="1"> <tr> <td> 1 </td> <td rowspan="2" > 2 </td> <td> 3 </td> </tr> <td> a </td> <td> c </td> </tr> </table> </body> </html>
The align Attributes left Aligns the cell content towards the left edge of the cell. right Aligns the cell content towards the right edge of the cell. center Aligns the cell content towards the center of the cell. justify Stretches the cell content so that each line has the same width
The top valign attribute middle bottom baseline Aligns the cell content towards the top of the cell. Aligns the cell content towards the middle of the cell. Aligns the cell content towards the bottom of the cell. Aligns the cell content against an invisible baseline for the content of all cells in the same row. This looks better if the text in different cells is displayed using different font sizes. The texts will then still be vertically aligned with the same baseline.
The width and height Attributes <table width="300" border="1"> <tr> <td>Cell 1</td> </tr> <td>Cell 2</td> </tr> </table>
• Thank You
- Slides: 14