HTML Advanced - Tables Chapter Notes | Computer Application: Class 10 PDF Download

➢ The data on the webpage can be represented in tabular form. In HTML, the format can be defined using <TABLE > tag. The <TABLE > tag arranges the data items on the web page in rows and columns.
➢ The structure of table is formed using the Table tag. The rows of the table are formed using the TR tag. The data in the cells of the rows are inserted using either the TH tag or the TD tag. The TH tag encloses the Header object and makes the data boldface and center aligned. The TD keeps the data in regular font and left aligned by default. The TH and TD tags are nested inside the TR tag and the TR tag in turn is nested within the TABLE tag.
➢ HTML Table Tags

➢ Illustration 

1. Border: This attribute is used to insert the lines on four sides of the table. The inside lines shows the rows and columns of the table and the outside lines displays the dimensions of the table. This attribute takes the value as a number starting from 1 to any number.
2. Align: The align attribute helps in placing the table on the webpage. If you want to place it in the center of the webpage, use the “center” value, for right side use “right” and for the left side of the web page, use the value “left”.
3. Width: The width attribute helps in identifying the breadth of the table in comparison to the webpage. It accepts the value as a number (in pixels) or in percentage (in proportion to the width of the webpage).
4. Border color: The colour of the lines inside and outside the table can also be changed using the “Border Color” attribute. It accepts the value as name of the colour. If you omit this attribute, the colour of the table border is set to its default grey.
5. Bgcolor: The background color of a table can be set using the attribute bgcolor. This attribute takes the name of the colour or hexadecimal number as value.
6. Background: If you want to place an image or a picture at the background of the table, you can do so using the background attribute. This attribute takes the value as the address or the path of the picture. The picture may be a bitmap or a graphic image.
➢ TD and TH element 
The TH element or <TH> tag helps in identifying a table header. Correspondingly, TD element or <TD> tag identifies the table data cell. The text inserted using the TH element is in boldface and centred by default. Compared to this, TD element or the <TD> tag is aligned to the left and the text is in regular font. The attributes used with <TD> or <TH> tag are: Align, Colspan, No wrap, Rowspan, Valign.
Align: The align attribute is similar to that of table, except that it aligns the text inside the cell rather than the table. <insert as new bullet point>
Valign: Valign takes the value top, middle, bottom to vertically align the text inside a cell.
Nowrap: The Nowrap attribute does not allow the text to flow to the next line in the cell. If the sentence is wider than the width of the cell, nowrap will show the sentence in one straight line.
ColSpan: The colspan attribute helps in merging the columns of a row. This attribute is not used with table tag but with the <TH> or the <TD> tag.
RowSpan: When the table’s cells spans across more than one row, it is called rowspan If we want to give the table a nice sidebar, this attribute is used. The rowspan appears as merged cells. Caption The <caption> tag is used to provide a text to the table so as to explain the contents of the table. It is generally in bold, at center with respect to the table.