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

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

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

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

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> </TABLE> 09 December 2018 Ivailo Chakarov

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>Price </TABLE> Item Price 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD>T-Shirt <TD>£5-99 </TABLE> Item Price T-Shirt £5-99 09 December 2018 Ivailo Chakarov

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>) tags make the content placed in them bold and centred By default, the data cell (<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.) 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD>T-Shirt <TD>£5-99 </TABLE> 100 pixels Item Price T-Shirt £5-99 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD>T-Shirt <TD>£5-99 </TABLE> Item Price T-Shirt £5-99 50 pixels 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD WIDTH="200" HEIGHT="100"> T-Shirt <TD>£5-99 </TABLE> Item Price T-Shirt £5-99 100 pixels 200 pixels 09 December 2018 Ivailo Chakarov

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>Price <TR><TD>T-Shirt <TD>£5-99 </TABLE> </CENTER> Item Price T-Shirt £5-99 09 December 2018 Ivailo Chakarov

Aligning Data Horizontally <TD ALIGN="center"> <TD ALIGN="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>Price <TR> <TD ALIGN="center">T-Shirt <TD ALIGN="right">£5-99 </TABLE> Item Price T-Shirt £5-99 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£5-99 </TABLE> Item Price T-Shirt £5-99 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£5-99 </TABLE> Item Price T-Shirt £5-99 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD VALIGN="top" BGCOLOR="red">T-Shirt <TD VALIGN="bottom">£5-99 </TABLE> Item Price T-Shirt £5-99 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£5-99 </TABLE> Item Price T-Shirt £5-99 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£5-99 </TABLE> 09 December 2018 Ivailo Chakarov

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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£5-99 </TABLE> 09 December 2018 Ivailo Chakarov