1 / 19

Creating Tables in HTML

Learn how to define and customize HTML tables for organizing content and controlling layout on web pages efficiently. Includes creating rows, cells, setting width, height, aligning data, and more.

cmolino
Download Presentation

Creating Tables in HTML

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. Creating Tables in HTML • Tables are used to neatly display information on a web page • Tables are also used to control web page layout (where we place text and images on the page) • Tables can be useful when creating borders around images and text on your page Ivailo Chakarov

  2. Table Parts RowHorizontal line of data Header CellContains text that describesthe data in a row or column Data CellContains data Ivailo Chakarov

  3. Defining the table <table>tagSimply defines that a table will existNo border or content are created <table> </table> Ivailo Chakarov

  4. Creating a table border <table border="1">Defines a border of 1 pixel width <table border="1"> </table> Ivailo Chakarov

  5. Creating a table row <tr>tagUsed to create a new rowNo content created as yetThe tag does not need to be closed <table border="1"> <tr> </tr> </table> Ivailo Chakarov

  6. Creating a header cell <th> tagUsed to create a header cell (describing other data)Does not need to be closedThe content follows the cell’s definition <table border="1"> <tr> <th>Item</th> <th>Price</th> </tr> </table> Ivailo Chakarov

  7. Creating a data cell <td> tagUsed to create a data cellDoes not need to be closedThe content follows the cell’s definition <table border="1"> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>T-Shirt</td> <td>£5-99</td> </tr> </table> Ivailo Chakarov

  8. A Few Points to Mention • The table would expand as much as necessary to accommodate the content (provided you have not specified a width for it) • By default, the header cell (<th> </th>) tags make the content placed in them bold and centred • By default, the data cell (<td> </td>) tags render the content placed in them aligned to the left • You can place any content you wish in the cells (images, lists, paragraphs, etc.) Ivailo Chakarov

  9. Specifying the table’s width <table width="100"> Defines a width for the table, 100 pixels wide <table border="1" width="100"> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>T-Shirt</td> <td>£5-99</td> </tr> </table> 100 pixels Ivailo Chakarov

  10. 50 pixels Specifying the table’s height <table height="100"> Defines a height for the table, 100 pixels wide <table border="1"width="100" height="50"> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>T-Shirt</td> <td>£5-99</td> </tr> </table> Ivailo Chakarov

  11. 100 pixels 200 pixels Specifying the size of a cell <td width="200" height="100"> Defines a width and height for a particular cellAffects column width and row height of which the cell is part of <table border="1"> <tr><th>Item</th> <th>Price </th></tr><tr> <td width="200" height="100"> T-Shirt </td> <td>£5-99</td> </table> Ivailo Chakarov

  12. Centring a table <center><table>…………</table></center> By default the table is left-aligned; centre it as follows <center><table border="1" WIDTH="100"> <tr><th>Item</th> <th>Price</th> <tr><td>T-Shirt</td> <td>£5-99</td> </table> </center> Ivailo Chakarov

  13. Aligning Data Horizontally <tdalign=“left"> <tdalign="center"> <tdalign="right"> To align a data cell horizontally use the align attributeBy default, the cell is aligned to the left <table border="1" width="100"> <tr> <th>Item</th> <th>Price</th> <tr> <td align="center">T-Shirt</td> <td align="right">£5-99</td></tr> </table> Ivailo Chakarov

  14. Aligning Data Vertically <td valign="top"> <td valign="middle"> <td valign="bottom"> To align a data cell vertically use the valign attributeBy default, the cell is aligned in the middle <table border="1" width="100"> <tr> <th>Item</th> <th>Price</th></tr> <tr> <td valign="top">T-Shirt</td> <td valign="bottom">£5-99</td> </tr> </table> Ivailo Chakarov

  15. Changing a row’s background <tr bgcolor="yellow">To change the colour of a row just use bgcolor attribute <table border="1" WIDTH="100"> <tr bgcolor=“yellow"> <th>Item</th> <th>Price</th></tr> <tr> <td valign="top">T-Shirt</td> <td valign="bottom">£5-99</td> </tr> </table> Ivailo Chakarov

  16. Changing a cell’s background <td bgcolor="red">To change the colour of a cell just use bgcolor attribute <table border="1" width="100"> <tr bgcolor=“yellow"> <th>Item</th><th>Price</th> <tr> <td valign="top"bgcolor="red">T-Shirt </td> <td valign="bottom">£5-99</td> </tr> </table> Ivailo Chakarov

  17. Changing a table’s background colour <table bgcolor="yellow">To change a table’s background colour use bgcolor attribute <table border="1" width="100“bgcolor="yellow"> <tr><th>Item</th> <th>Price</th> </tr><tr> <td valign="top">T-Shirt</td> <td valign="bottom">£5-99</td> </tr> </table> Ivailo Chakarov

  18. Changing cell spacing <table cellspacing="10">You can change the amount of space between each cell Default spacing is 2 pixels <table border="1" width="200"cellspacing="10"> <tr> <th>Item</th> <th>Price</th></tr> <tr> <td valign="top">T-Shirt</td> <td valign="bottom">£5-99</td></tr> </table> Ivailo Chakarov

  19. Changing cell padding <table cellpadding="10">You can change the amount of space around the contents of each cell; Default cell padding is 1 pixel <table border="1" width="200“cellpadding="10"> <tr> <th>Item</th> <th>Price</th> </tr><tr> <td valign="top">T-Shirt</td> <td valign="bottom">£5-99</td></tr> </table> Ivailo Chakarov

More Related