Thursday, January 11, 2018

How To Use Table Tag In Html

Here In This Html Tutorial We Will Try To Show How To Use Table Tag In Web Page.Tables consist of the <table> element as well as other table-related elements. These other elements are nested inside the <table> tags to determine how the table is constructed.The HTML <table> tag is used for defining a table in an HTML document. The <table> tag contains other tags that define the structure of the table.An HTML table is defined with the <table> tag.The <table> tag is written as <table></table> with the various table elements nested between the start and end tags.Each <tr> element represents a row in the table. A row can have one or more <td> or <th> elements, which determine the columns in the table. Specifically, <td> represents table data and <th> represents a table header.The HTML <table> tag is used for defining a table. The table tag contains other tags that define the structure of the table.The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells.Each table may have an associated caption (see the CAPTION element) that provides a short description of the table's purpose. A longer description may also be provided (via the summary attribute) for the benefit of people using speech or Braille-based user agents.

Table rows may be grouped into a head, foot, and body sections, (via the THEAD, TFOOT and TBODY elements, respectively). Row groups convey additional structural information and may be rendered by user agents in ways that emphasize this structure. User agents may exploit the head/body/foot division to support scrolling of body sections independently of the head and foot sections. When long tables are printed, the head and foot information may be repeated on each page that contains table data.Authors may also group columns to provide additional structural information that may be exploited by user agents. Furthermore, authors may declare column properties at the start of a table definition (via the COLGROUP and COL elements) in a way that enables user agents to render the table incrementally rather than having to wait for all the table data to arrive before rendering.Table cells may either contain "header" information (see the TH element) or "data" (see the TD element). Cells may span multiple rows and columns. The HTML 4 table model allows authors to label each cell so that non-visual user agents may more easily communicate heading information about the cell to the user. Not only do these mechanisms greatly assist users with visual disabilities, they make it possible for multi-modal wireless browsers with limited display capabilities (e.g., Web-enabled pagers and phones) to handle tables.Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Step 1:

<!DOCTYPE html>
<html>
<head>
<title>Table Design</title>
</head>
<table cellspacing="1" cellpadding="4" border="1" bordercolor="red">
<tr>
<th rowspan=2>Sr.No.
<th rowspan=2>Student Name
<th colspan=4>subject Name
</tr>
<tr>
<th>Hindi</td>
<th>English</td>
<th>Math</td>
<th>science</td>
</tr>
<tr>
<td>1</td>
<td>viraj</td>
<td>45</td><td>55</td><td>85</td><td>35</td>
</tr>
<tr>
<td>2</td>
<td>anil</td>
<td>25</td><td>65</td><td>45</td><td>95</td>
</tr>
</body>
</html>


Output :



No comments:

Post a Comment

How To Create Image Gallery In Html

Hello Friend My Name Is Viraj,Today I Will Create Image Gallery And Display On A Webpage.The emergence of CSS3 technology has enabled web d...