---

The td and th Elements

The <td> and <th> Elements Represent Table Cells.

Remember By default, the contents of a <th> element are usually displayed in a bold font, horizontally aligned in the center of the cell. The content of a <td> element, meanwhile, will usually be displayed left - aligned and not in bold (unless otherwise indicated by CSS or another element).

The rowspan Attribute

The purpose of the HTML rowspan attribute is to define the number of rows spanned by an individual table cell. The value of the attribute being the number of rows the cell stretches across.

	<td rowspan = "2" >
	

Html code

 
 <table width="300" border="2" cellpadding="3">  
<tr>  
<td> </td>  
<td rowspan="2">&nbsp;</td>  
</tr>  
<tr>  
	<td>&nbsp;</td>  
</tr>  
<tr>  
	<td>&nbsp;</td>  
	<td>&nbsp;</td>  
</tr>  
</table>  

Live Preview

	 <th rowspan="3">
	

html code

 
<table>
  <tr>
    <th>Month</th>
    <th>Earning</th>
    <th rowspan="3">Savings for holiday!</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table> 

Live Preview

The scope Attribute

The purpose of the HTML scope attribute is to specify the scope for header cells of a table.

HTML scope attribute supports td and th elements. It can be used instead of the headers attribute in basic tables, but does not have much support.

	 scope = "range"
	

The objective of this technique is to associate header cells with data cells in complex tables using the scope attribute. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively.

The table that follows shows the possible values of the attribute:

Value	Description
col	Defines that the associated cell is a header for a column.
row	Defines that the associated cell is a header for a row.
colgroup	Defines that the associated cell is a header for a column group(a group of columns created using the <col> or <colgroup> element ).
rowgroup	Defines that the associated cell is a header for a row group (a group of cells in a row created using the <thead> , <tbody> , or <tfoot> elements).

html code

 
<table width="200" border="1" cellpadding="2">  
 <tr>  
<th scope="col">Student Code </th>  
<th scope="col">Percentage of marks</th>  
<th scope="col">Grade</th>  
<th scope="col">Remarks</th>  
<tr>  
</tr>  
		<td>S001</td>  
		<td>92</td>  
		<td>A+</td>  
		<td>Excellent</td>  
<tr>  
</tr>  
	<td>S002</td>  
	<td>76</td>  
	<td>B+</td>  
	<td>Good</td>  
</tr>  
</table>

Live Preview

html code

In the following example, column #1 contains serial numbers for rows in the table and the second column contains the key value for the row. The cells in the second column may then use scope="row". The cells in the first row too are marked up with td and use scope="col".

 
<table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>
    <th scope="col">Phone#</th>
    <th scope="col">Fax#</th>
    <th scope="col">City</th>
  </tr><tr>
    <td>1.</td>
    <th scope="row">Joel Garner</th>
    <td>412-212-5421</td>
    <td>412-212-5400</td>
    <td>Pittsburgh</td>
  </tr><tr>
    <td>2.</td>
    <th scope="row">Clive Lloyd</th>
    <td>410-306-1420</td>
    <td>410-306-5400</td>
    <td>Baltimore</td>
  </tr><tr>
    <td>3.</td>
    <th scope="row">Gordon Greenidge</th>
    <td>281-564-6720</td>
    <td>281-511-6600</td>
    <td>Houston</td>
  </tr>
</table> 

Live Preview

The valign Attribute

The purpose of the HTML valign attribute is to define the vertical alignment of the content of a table cell.

Possible values are top, middle, bottom, and baseline, each of which was discussed earlier in the chapter in the subsection entitled "The valign Attribute" within the section "The <tr> Element Contains Table Rows."

	 valign = "top"
	

The table that follows shows the possible values of the attribute:

Value	Description
top	Sets the vertical alignment of cell content top.
middle	Sets the vertical alignment of cell content center.
bottom	Sets the vertical alignment of cell content bottom.
baseline	If set, the first text line occurs on a baseline common to all cells in the row.

html code

<table width="200" border="1" cellpadding="2">  
<tr>  
<th valign="middle" >Student Code </th>  
<th valign="middle">Percentage of marks</th>  
<th valign="middle">Grade</th>  
<th valign="middle">Remarks</th>  
</tr>  
<tr>  
<td valign="baseline">S001</td>  
<td valign="baseline">92</td>  
<td valign="baseline">A+</td>  
<td valign="baseline">Excellent</td>  
</tr>  
<tr>  
<td valign="baseline">S002</td>  
<td valign="baseline">76</td>  
<td valign="baseline">B+</td>  
<td valign="baseline">Good</td>  
</tr>  
</table>

Live Preview

The width Attribute

	 width= "159px"
	

html code

<table border="1px">
<tbody>
<tr>
<td  width= "159px">Name</td>
<td  width= "159px">Roll</td>
</tr>
<tr>
<td  width= "209px">Rambo</td>
<td  width= "159px">CSE13421</td>
</tr>
<tr>
<td  width= "159px">Rahim</td>
<td  width= "159px">CSE14421</td>
</tr>
</tbody>
</table>

Live Preview

---