Basic Table Elements and Attributes: Understanding <td> and <th> Elements (Part 4)

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).

Now we will discuss about the below attributes.

The abbr Attribute

The pPurpose of the HTML abbr attribute is to specify the abbreviation for a table header cell.

Type of value of HTML abbr attribute is text.There is no default value of HTML abbr attribute.

..... 
	
	.....

Example of HTML abbr attribute with td

 
 <table>  
<tr>  
<td abbr="United Kingdom">UK</td>  
<td>Capital is London.</td>  
</tr>  
<tr>  
<td abbr="United States of America">USA</td>  
<td>Capital is Washington, D.C.</td>  
</tr>  
</table>  
 

Live Preview

Example of HTML abbr attribute with th

 
<table border="1px">  
<tr>  
	<th abbr="State">Country</th>  
	<th abbr="Capital">Capital of the state</th>  
</tr>  

<tr>  
	<td abbr="United Kingdom">UK</td>  
	<td>Capital is London.</td>  
</tr>  
<tr>  
	<td abbr="United States of America">USA</td>  
	<td>Capital is Washington, D.C.</td>  
</tr>  
</table> 
 

Live Preview

The align Attribute

The align attribute sets the horizontal alignment for the content of the cell.

HTML align attribute supports col, colgroup, tbody, td, tfoot, th, thead, tr elements. Usage of align attribute for any other HTML elements is deprecated. You must use CSS for those.

align = "alignment"

The possible values for the align attribute are left, right, center, justify, and char, each of which
was described earlier in "The <tr> Element Contains Table Rows" section.

Name	Description
left	Left align data, left justify text.
center	Center align data, center justify text.
right	Right align data, right justify text.
justify	Double justify text.
char	If used, text is aligned around a specific character.

Example 1: align="left"

 
<table border="1">   
<tr>
	<th align="left">Student Code</th>
	<th align="left">% of marks</th>
</tr> 
<tr>
	<td align="left">S001</td>
	<td align="left">86.79</td>
</tr>  
<tr>
	<td align="left">S002</td>
	<td align="left">78.98</td>
</tr>  
<tr>
	<td align="left">S003</td>
	<td align="left">83.59</td>
</tr> 
   
</table> 
 

Live Preview

Example 2: align="center"

 
<table border="1">   
<tr>
	<th align="center">Student Code</th>
	<th align="center">% of marks</th>
</tr> 
<tr>
	<td align="center">S001</td>
	<td align="center">86.79</td>
</tr>  
<tr>
	<td align="center">S002</td>
	<td align="center">78.98</td>
</tr>  
<tr>
	<td align="center">S003</td>
	<td align="center">83.59</td>
</tr> 
   
</table> 
 

Live Preview

Example 3: align="right"

 
<table border="1">   
<tr>
	<th align="right">Student Code</th>
	<th align="right">% of marks</th>
</tr> 
<tr>
	<td align="right">S001</td>
	<td align="right">86.79</td>
</tr>  
<tr>
	<td align="right">S002</td>
	<td align="right">78.98</td>
</tr>  
<tr>
	<td align="right">S003</td>
	<td align="right">83.59</td>
</tr> 
   
</table> 
 

Live Preview

Example 4: align="justify"

 
<table border="1">   
<tr>
	<th align="justify">Student Code</th>
	<th align="justify">% of marks</th>
</tr> 
<tr>
	<td align="justify">S001</td>
	<td align="justify">86.79</td>
</tr>  
<tr>
	<td align="justify">S002</td>
	<td align="justify">78.98</td>
</tr>  
<tr>
	<td align="justify">S003</td>
	<td align="justify">83.59</td>
</tr> 
   
</table> 
 

Live Preview

Example 5: align="char"

 
<table border="1">   
<tr>
	<th >Student Code</th>
	<th>% of marks</th>
</tr> 
<tr>
	<td>S001</td>
	<td  align="char" char=".">86.79</td>
</tr>  
<tr>
	<td>S002</td>
	<td  align="char" char=".">78.98</td>
</tr>  
<tr>
	<td>S003</td>
	<td  align="char" char=".">83.59</td>
</tr> 
   
</table> 
 

Live Preview

The axis Attribute

The purpose of the HTML axis attribute is to specify a comma-separated list of category names for a table cell or table header cell.

axis = "heavy, old, valuable"

Rather than having a visual formatting effect, this attribute allows you to preserve data, which then may be used programmatically, such as querying for all cells belonging to a certain category.

HTML axis attribute supports td and th elements.

<table border="1">  
<tr>  
	<th axis="State">Country</th>  
	<th axis="Capital">Capital of the Country</th>  
</tr>  
<tr>  
	<td axis="State">USA</td>  
	<td axis="City">Washington,D.C.</td>  
</tr>  
<tr>  
	<td axis="State">UK</td>  
	<td axis="City">London</td>  
</tr>  
</table>

Live Preview

The bgcolor Attribute

The bgcolor attribute sets the background color for the cell. The value of this attribute should be either a color name or a hex code

bgcolor = "red"

<table border="1" height="300">  
<tr>  
	<th bgcolor = "red">Country</th>  
	<th bgcolor = "green">Capital of the Country</th>  
</tr>  
<tr>  
	<td bgcolor = "yellow">USA</td>  
	<td bgcolor = "red">Washington,D.C.</td>  
</tr>  
<tr>  
	<td bgcolor = "pink">UK</td>  
	<td bgcolor = "red">London</td>  
</tr>  
</table>

Live Preview

The char Attribute

Same as the previous chapter.

The charoff Attribute

Same as the previous chapter.

The colspan Attribute

The purpose of the HTML colspan attribute is to define the number of columns spanned by an individual column definition.

HTML colspan attribute supports td and th elements

colspan = "2"

The value of the attribute specifies how many columns of the table a cell will span across.

<table border="2" cellpadding="5">  
<tr>
	<th colspan="2">Development</th> 
</tr>  
<tr>
	<td>Em001</td>
	<td>$1500.00</td>
</tr>  
<tr>
	<td>Em002</td>
	<td>$1550.00</td>
</tr>  
<tr>
	<td>Em003</td>
	<td>$1700.00</td>
</tr>  
<tr>
<td colspan="2">Total : $4750.00</td> 
 
<tr>
	<th colspan=2>Marketing</th>
 </tr>  
<tr>
	<td>Em005</td>
	<td>$1500.00</td>
</tr>  
<tr>
	<td>Em006</td>
	<td>$1500.00</td>
</tr>  
<tr>
	<td>Em006</td>
	<td>$1500.00</td>
</tr>  
<tr><td colspan="2">Total : $4500.00</td>  
</table>

Live Preview

The headers Attribute

The purpose of the HTML headers attribute is to specify a space-separated list of identifiers for table header cells. HTML headers attribute supports td and th elements.

headers = "income q1"

 <table border="1" width="100%">  
  <tr>  
    <th headers="employees">Code</td>  
    <th headers="salary">Salary</td>  
   
  </tr>  
  <tr>  
    <td headers="code">EM001</td>  
    <td headers="salary">$1600.00</td>  
  </tr>  
</table> 
  

The main purpose of this attribute is to support voice browsers. When a table is being read to you, it can be hard to keep track of which row and column you are on; therefore, the header attribute is used to remind users which row and column the current cell's data belongs to.

Live Preview

The height Attribute

The height attribute allows you to specify the height of a cell in pixels, or as a percentage of the available space:

height ="30" or  height="20%"

It has been replaced by the CSS height property.

 <table border="1" width="100%">  
  <tr>  
    <th height ="30">Code</td>  
    <th height ="30">Salary</td>  
   
  </tr>  
  <tr>  
    <td height ="30">EM001</td>  
    <td height ="30">$1600.00</td>  
  </tr>  
</table> 
  

The main purpose of this attribute is to support voice browsers. When a table is being read to you, it can be hard to keep track of which row and column you are on; therefore, the header attribute is used to remind users which row and column the current cell's data belongs to.

Live Preview

The nowrap Attribute (Deprecated)

Not be allowed in XHTML, HTML 5

nowrap = "nowrap"

The nowrap attribute is used to stop text from wrapping onto a new line within a cell. You would use nowrap only when the text really would not make sense if it were allowed to wrap onto the next line (for example, a line of code that would not work if it were spread across two lines).