1 / 19

Understanding HTML Tables: Structure and Styling Techniques

This guide covers the essential concepts of HTML tables, including their structure and styling. It explains the roles of opening and closing tags for tables, rows, and cells, with practical syntax examples. Learn how to set borders, colors, cell padding, and spacing, and how to align content effectively. The guide also delves into advanced features like merging cells (colspan and rowspan) and setting dimensions. Perfect for beginners looking to master table creation and styling in HTML.

haile
Download Presentation

Understanding HTML Tables: Structure and Styling Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. TABLES

  2. TABLES • Each table has an opening and closing tag. <table>…………….……………….</table> • Each row has an opening and closing tag. <tr>………………………………………</tr> • Each cell has a opening and closing tag. <td>………………………………………</td>

  3. TABLES <table> <tr> <td>400</td> <td>500</td> </tr> <tr> <td>600</td> <td>200</td> </tr> </table> • Each table has an opening and closing tag. • <table>……….</table>

  4. TABLE ROW <table> <tr> <td>400</td> <td>500</td> </tr> <tr> <td>600</td> <td>200</td> </tr> </table> • Each row has an opening and closing tag. <tr>………………</tr>

  5. TABLE CELL <table> <tr> <td>400</td> <td>500</td> <tr> <td>600</td> <td>200</td> </tr> </table> • Each cell has a opening and closing tag. <td>……………………</td>

  6. <table border=5> <tr> <td>400</td> <td>500</td> </tr> <td>600</td> <td>200</td> </tr> </table> Table Border will always be a number TABLE BORDER

  7. INTERNAL BORDER • You can turn OFF internal borders <table rules=“none”>

  8. <table border=5 bordercolor =green> <tr> <td>400</td> <td>500</td> </tr> <td>600</td> <td>200</td> </tr> </table> Standard colors or hexadecimal TABLE BORDER COLOR

  9. <table border=5 bgcolor=green> <tr> <td>400</td> <td>500</td> </tr> <td>600</td> <td>200</td> </tr> </table> Standard colors or hexadecimal TABLE BACKGROUND COLOR

  10. <table border=5> <tr bgcolor=yellow> <td>400</td> <td>500</td> </tr> <td>600</td> <td>200</td> </tr> </table> Color tag can be placed in the <tr> tag or the <td> tag. Standard colors or hexadecimal TABLE CELL COLOR

  11. Space between the content within the cell and the edges of that cell <table border=“5” cellpadding=“8”> CELL PADDING

  12. Space in between each individual cell <table border=“5” cellpadding=“8” cellspacing=“15”> CELL SPACING

  13. WIDTH AND HEIGHT • You can specify size or percentage of browser window. • <table border=“5” height=“200” width=“200”> • <table border=“3” height=“50%” width=“50%”>

  14. ALIGNMENT • <table div align=???????> • CENTER • RIGHT • LEFT

  15. CELL CONTENT ALIGNMENT • You can align the cell content several ways. • You can align by cell or by row • <table align=“center”> • <table valign=“top”>

  16. <table> <tr valign=“top”> <td align=“center”>400</td> <td >500</td> </tr> <td valign=“right”>600</td> <td>700</td> CELL CONTENT ALIGNMENT

  17. <table> <caption align=“?????”>xxxxx</caption> <tr> <td>400</td> <td>500</td> </tr> <td valign=“right”>600</td> <td>700</td> Bottom or Top CAPTIONS

  18. SPANNING COLUMNS • <table> • <tr> • <td colspan=2> vvvvvv</td> • <td>VVVV</td> • </tr> • <tr> • <td>vvvv</td> • <td>vvvvv</td> • <td>vvvvvv</td> • </tr> • </table>

  19. SPANNING ROWS • <table> • <tr> • <td colspan=2> these two cells have been merged</td> • <td rowspan=2> these two cells have been merged</td> • </tr> • <tr> • <td>vvvv</td> • <td>vvvvv</td> • <td>vvvvvv</td> • </tr> • </table>

More Related