Class 10 Exam  >  Class 10 Notes  >  Computer Application: Class 10  >  Chapter Notes: HTML Advanced - Tables

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
HTML Advanced - Tables Chapter Notes | Computer Application: Class 10
HTML Advanced - Tables Chapter Notes | Computer Application: Class 10

➢ 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.
HTML Advanced - Tables Chapter Notes | Computer Application: Class 10HTML Advanced - Tables Chapter Notes | Computer Application: Class 102. 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”.
HTML Advanced - Tables Chapter Notes | Computer Application: Class 103. 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.
HTML Advanced - Tables Chapter Notes | Computer Application: Class 105. 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.

The document HTML Advanced - Tables Chapter Notes | Computer Application: Class 10 is a part of the Class 10 Course Computer Application: Class 10.
All you need of Class 10 at this link: Class 10
11 videos|49 docs|18 tests

Top Courses for Class 10

FAQs on HTML Advanced - Tables Chapter Notes - Computer Application: Class 10

1. What is an HTML table?
Ans. An HTML table is a structured grid of cells that organizes data into rows and columns. It is used to present tabular data such as statistics, financial information, or any other data that needs to be displayed in a structured format.
2. How do I create a table in HTML?
Ans. To create a table in HTML, you can use the <table> element along with other elements such as <tr> for table rows, <th> for table headers, and <td> for table data cells. You can define the number of rows and columns using these elements and their attributes.
3. Can I add borders to my HTML table?
Ans. Yes, you can add borders to your HTML table using CSS. You can apply border styles to the <table>, <th>, and <td> elements using the CSS border property. By specifying the border width, color, and style, you can customize the appearance of the table borders.
4. How can I merge cells in an HTML table?
Ans. To merge cells in an HTML table, you can use the colspan and rowspan attributes. The colspan attribute specifies the number of columns a cell should span horizontally, while the rowspan attribute specifies the number of rows a cell should span vertically. By using these attributes in the <td> or <th> elements, you can merge multiple cells together.
5. Is it possible to add background colors or images to my HTML table?
Ans. Yes, you can add background colors or images to your HTML table using CSS. You can apply background colors to the <table>, <th>, and <td> elements using the CSS background-color property. To add background images, you can use the CSS background-image property and specify the URL of the image. By using these CSS properties, you can enhance the visual appearance of your HTML table.
11 videos|49 docs|18 tests
Download as PDF
Explore Courses for Class 10 exam

Top Courses for Class 10

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

ppt

,

Extra Questions

,

past year papers

,

Exam

,

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

,

Free

,

MCQs

,

practice quizzes

,

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

,

shortcuts and tricks

,

Sample Paper

,

Viva Questions

,

video lectures

,

mock tests for examination

,

study material

,

Semester Notes

,

Previous Year Questions with Solutions

,

Summary

,

Objective type Questions

,

Important questions

,

pdf

,

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

;