Working with tables in HTML


WORKING WITH TABLES




Identifying the basic structure of the table
Once registered for  a online exam, a user is provided a login id and password.The test result of the candidates, which comprise information such as, name, login id, course name, and marks and thereafter displayed on the website.

Tables can be used to display such information, which are arrange in the forms of horizontal rows and vertical columns.
The<Table>tag act as a container for tags that are used for creating rows and columns and adding data.The table contains a opening<Table>tag and closing</Table> tag.In addition, you can also control the appearance of the border around the table.This is done by the using border attribute of the <Table>tag.


The table is divided into the  following logical sections:
  • Body
  • Header
  • Footer
Specifying Table Body

The Table Body contains data arranged in rows.Each rows further comprises one or multiple columns.The rows of the body of the table can be grouped by using<TBody>tag.
You can use more than one<TBody>tag inside the <Table>tag.
This is done when you want to logically groups the rows of the table body for applying different presentation styles to each group.

Creating Rows
For adding rows to the table <TR>tag is used.The contents of the rows are placed between the <TR> and </TR> container tags.The content of each rows comprises one or more column values.The number of rows in the table depends on the number of <TR>tags within the <Table>tag.

Creating Column
For adding columns to the rows <TD>tag is used.The <TD>tag specifies the content of the columns.The content is enclosed within the <TD>and </TD>container tags.The <TD>tag is ised within the <TR>and </TR>tags.

Consider the following code snippet that shows the use of<TR>and<TD>tags in HTML:

<!DOCTYPE HTML>
<HTML>
<BODY>
<TABLE border="1">
<TBODY>
<TR><TD>Name</TD>
<TD>Login ID</TD>
<TD>Course Name</TD>
<TD>Marks</TD></TR>
<TR>
<TD>Steve</TD>
<TD>01234</TD>
<TD>My SQL 5 Developer Certified Professional Exam, Part 1</TD>
<TD>92</TD>
</TR>

<TR>
<TD>John</TD>
<TD>01235</TD>
<TD>My SQL 5 Developer Certified Professional Exam, Part 1</TD>
<TD>96</TD>
</TR>
<TBODY>
</TABLE>
</BODY>
</HTML>

Specifying Table Header

The table header is the row that contains the headings for the columns of the table.The headings in the table provides a brief explanation about the data in a subsequent rows of the table.

Creating Heading for the Table Columns

To create the Heading for the Table Columns , you can use the <TH>tag.The <TH>tag display the heading in bold and is centrally aligned.

The following code snippet shows the use of<TH>tag:

<TABLE border="1">
<THEAD>
<TR>
<TH>Name</TH>
<TH>Login</TH>
<TH>Course Name</TH>
<TH>Marks</TH>
</TR>
</THEAD>
      ......
</TABLE>


Specifying Table Footer

Consider a situation where you need to provide a summary for a table rows. Foe Example- at the end of the table, you need to specify the total number of students.For this, you can use the <TFOOT>tag, which is always specified after the <THEAD>tag but before the <TBODY>tag.The <TFOOT> tag contain atleast one<TR>tag.

The following code snippet shows the use of<TFOOT>tag:
<TABLE border="1">
<THEAD>
<TR><TH colspan="4">Top Three Performers</TH></TR>
<TR>
<TH>Name</TH>
<TH>Login ID</TH>
<TH>Course Name</TH>
<TH>Marks</TH>
</TR>
</THEAD>
<TFOOT>
<TR>
<TD>Joseph</TD>
<TD>01236</TD>
<TD>My SQL 5 Developer Certified Professional Exam, Part 1</TD>
<TD>98</TD>
</TR>
<TR>
<TD>John</TD>
<TD>01235</TD>
<TD>My SQL 5 Developer Certified Professional Exam, Part 1</TD>
<TD>85</TD>
</TR>
<TR>
<TD>Steve</TD>
<TD>01234</TD>
<TD>My SQL 5 Developer Certified Professional Exam, Part 1</TD>
<TD>92</TD>
</TR>
</TBODY>
</TABLE>

Specifying Table Caption

After creating a table you should define a title for it . A caption Specifies a title for a table. It enables a users to understand the informations that the table displays.

For creating a table title,  the <Caption> tag is used. Once specified it become the first element after the <Table> tag . It has an opening tag  <Caption>, and a closing tag </Caption>. These tag are used
within the <Table> tag.

Consider the following code snippet  that shows the use of the <Caption> tag in HTML.

<TABLE border="1">
<CAPTION> Test Result </CAPTION>
<THEAD>
<TR><TH COLSPAN="4"> Top Three Performance</TH></TR>
<TR>
<TH> Name</TH>
<TH>Login ID</TH>
<TH>Course Name</TH>
<TH>Marks</TH>
</TR>
</THEAD>
<TFOOT>
<TR><TD colspan="3">Total number of students</TR></TD>
<TD>3</TD></TR>
</TFOOT>
<TBODY>
<TR>
<TD>Joseph</TD>
<TD>01236</TD>
<TD>My SQL 5 Database Administrator Certified Professional Exam, Part 1</TD>
<TD>98</TD>
</TR>
<TR>
<TD>John</TD>
<TD>01235</TD>
<TD>My SQL 5 Developer Certified Professional Exam, Part 1</TD>
<TD>85</TD>
</TR>
<TR>
<TD>Steve</TD>
<TD>01234</TD>
<TD>My SQL 5 Developer Certified Professional Exam, Part 1</TD>
<TD>92</TD>
</TR>
</TBODY>
</TABLE>

The preceding code snippet assigns a caption to the Test Result  table,


About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment