Creating Tables in HTML Tables are used to
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 12/22/2021 Ivailo Chakarov 2
Table Parts Row Horizontal line of data Header Cell Contains text that describes the data in a row or column Data Cell Contains data 12/22/2021 Ivailo Chakarov Item Price T-Shirt £ 5 -99 Trousers £ 21 -99 Coat £ 59 -99 3
Defining the table <TABLE> tag Simply defines that a table will exist No border or content are created <TABLE> There will be a table here ! </TABLE> 12/22/2021 Ivailo Chakarov 4
Creating a table border <TABLE BORDER="1"> Defines a border of 1 pixel width <TABLE BORDER="1"> The table will have a border which will be 1 pixel wide </TABLE> 12/22/2021 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> </TABLE> 12/22/2021 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>Price Item Price </TABLE> 12/22/2021 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>Price <TR> <TD>T-Shirt <TD>£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov Item T-Shirt Price £ 5 -99 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>) 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. ) 12/22/2021 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>Price <TR> <TD>T-Shirt <TD>£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov 100 pixels Item T-Shirt Price £ 5 -99 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 50 pixels <TH>Price <TR> <TD>T-Shirt <TD>£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov Item T-Shirt Price £ 5 -99 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>Price <TR> <TD WIDTH="200" HEIGHT="100"> 100 pixels T-Shirt <TD>£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov Item T-Shirt Price £ 5 -99 200 pixels 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>Price <TR><TD>T-Shirt <TD>£ 5 -99 </TABLE> </CENTER> 12/22/2021 Ivailo Chakarov Item T-Shirt Price £ 5 -99 13
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> 12/22/2021 Ivailo Chakarov Item T-Shirt Price £ 5 -99 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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov Item Price T-Shirt £ 5 -99 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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov Item Price T-Shirt £ 5 -99 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>Price <TR> <TD VALIGN="top" BGCOLOR="red">T-Shirt <TD VALIGN="bottom">£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov Item Price T-Shirt £ 5 -99 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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov Item Price T-Shirt £ 5 -99 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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£ 5 -99 </TABLE> 12/22/2021 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>Price <TR> <TD VALIGN="top">T-Shirt <TD VALIGN="bottom">£ 5 -99 </TABLE> 12/22/2021 Ivailo Chakarov 20
- Slides: 19