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
04 December 2018
Ivailo Chakarov

2. Table Parts Row Horizontal line of data
Item
Price
T-Shirt
£5-99
Trousers
£21-99
Coat
£59-99
Header Cell Contains text that describes the data in a row or column
Data Cell Contains data
04 December 2018
Ivailo Chakarov

3. Defining the table
<table>tag Simply defines that a table will exist No border or content are created
<table>
</table>
There will be a
table here !
04 December 2018
Ivailo Chakarov

4. The table will have a border which will be 1 pixel wide
Creating a table border
<table border="1"> Defines a border of 1 pixel width
<table border="1">
</table>
The table will have a border which will be 1 pixel wide
04 December 2018
Ivailo Chakarov

5. Creating a table row
<tr>tag Used to create a new row No content created as yet The tag does not need to be closed
<table border="1">
<tr>
</tr>
</table>
04 December 2018
Ivailo Chakarov

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

7. Creating a data cell
<td> tag Used to create a data cell Does not need to be closed The 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>
Item
Price
T-Shirt
£5-99
04 December 2018
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.)
04 December 2018
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>
</table>
100 pixels
Item
Price
T-Shirt
£5-99
04 December 2018
Ivailo Chakarov

10. 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>
Item
Price
T-Shirt
£5-99
50 pixels
04 December 2018
Ivailo Chakarov

11. Specifying the size of a cell
<td width="200" height="100"> Defines a width and height for a particular cell Affects 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>
Item
Price
T-Shirt
£5-99
100 pixels
200 pixels
04 December 2018
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>
Item
Price
T-Shirt
£5-99
04 December 2018
Ivailo Chakarov

13. Aligning Data Horizontally
<tdalign=“left"> <tdalign="center"> <tdalign="right"> To align a data cell horizontally use the align attribute By 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>
Item
Price
T-Shirt
£5-99
04 December 2018
Ivailo Chakarov

14. Aligning Data Vertically
<td valign="top"> <td valign="middle"> <td valign="bottom"> To align a data cell vertically use the valign attribute By 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>
Item
Price
T-Shirt
£5-99
04 December 2018
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>
Item
Price
T-Shirt
£5-99
04 December 2018
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>
Item
Price
T-Shirt
£5-99
04 December 2018
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>
Item
Price
T-Shirt
£5-99
04 December 2018
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>
04 December 2018
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>
04 December 2018
Ivailo Chakarov