Table Tag
What is a
Table?
A table represents data in easily
understandable form. The tables are used for large amount of data. Examples of
tables include financial reports, TV schedules, and sports results.
<table>
The <table> tag is used to create a table in the web
page. The contents of the table are written out row by row.
<tr>
The <tr> tag is used to create rows in a table.It is a
pair tag(means it has both opening and close tags).(tr stand for table row)It
is followed by one or more <td> tags.
<tr>
<td></td>
<td></td>
</tr>
<td>
Each cell of a table is represented using a <td>
element. (The td stands for table data.).It is also a pair tags(Means that it
have both opening and closing tags).
<td></td>
For
Example:
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
</table>
Table Headings
<th>
The <th> tag is used to give a heading to table
columns.
For
Example:
<table>
<tr>
<th></th>
<th
scope="col">Saturday</th>
</tr>
<tr>
<th scope="row">Tickets
sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total
sales:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>
Border & Background Attribute
Border Attribute
This attribute of the table is used to show the border of the
table.
For Example
<table border="2">
<tr>
<td>Adnan</td>
<td>Zeeshan</td>
<td>Farhan</td>
</tr>
<tr>
<td>2201</td>
<td>2202</td>
<td>2203</td>
</tr>
</table>
Background Attribute
The bgcolor attribute was used to give the background color
to the entire table or individual table cell.
For
Example:
<table border="2" bgcolor="red">
<tr>
<td>Adnan</td>
<td>Zeeshan</td>
<td>Farhan</td>
</tr>
<tr>
<td>2201</td>
<td>2202</td>
<td>2203</td>
</tr>
</table>
Spanning Columns
Sometimes you may need the entries in a table to stretch
across more than one column. For this purpose ,we use the attribute of Colspan
to merge the two columns. The Colsapan attribute can be used on the <th>
and <tr> element.
For
Example:
<table border="2">
<tr>
<td>Phy</td>
<td>Chem</td>
<td>Cs</td>
<td>Eng</td>
</tr>
<tr>
<td>1</td>
<td
colspan="2">2</td>
<td>3</td>
</tr>
</table>
Spanning Rows
You may also need entries in a table to stretch down across
more than one row. For this Purpose , we use Rowspan attribute to merge two
rows. The Rowspan attribute can be used on the <th> and <tr>
element.
For Example:
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td
rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>
No comments:
Post a Comment