Attributes of TR Tag in HTML Tables

Use Of TR Tag

<TR> tag is used to create rows in HTML Tables. <TR> is the opening tag to start a row and </TR> is a closing tag to end a row. You can place pairs of <td>...</td> tags to create data cells in a row within the <tr>...</tr> tags.
for example to create a row with only one cell containing data "Apples", we will use the following html code.and Mangoes respectively:
<tr>
<td>Apples</td>
</tr>

Apples

If you want to create a row with two cells containing data "Apples" and "Mangoes" respectively, we will use the following html code.
<tr>
<td>Apples</td>
<td>Mangoes</td>
</tr>

Apples

Mangoes

You canm also create a header row with the help of <TR> tag and <TH> tags. For example, to create a header row with two header cells with contents "Employee" and "Salary", we will use the following HTML coding:
<tr>
<th>Employee</th>
<th>Salary</th>
</tr>

Employee	Salary

Attributes of TR Tag

1. align

It is used to define the horizontal alignment of text in cells, in a particular row. The possible values are:
left: The text is aligned to the left.
center: The text is centered.
right: The text is aligned to the right.
justify: The text is justified to both, left and right, margins.
Example HTML code

<table border="1">
<tr align="right">
<td width="100">Salary</td>
<td width="100">10000</td>
</tr>
</table>

Salary

10000

2. valign

It defines vertical alignment of the text with in cells in a row. Possible values are:
    top: The text is aligned to the top.
    middle: The text is vertically centered. This is the default value.
    bottom: The text is aligned to the botom.
  

3. bgcolor

It defines the background color that will be used as background of all the cells inside the row.
For example, if we use <tr bgcolor="green">, all cells in this row will have a green background as shown below.
<table border="1">
<tr bgcolor="green">
<td>Apple</td>
<td>Banana</td>
<td>mango</td>
</tr>
</table>

Apple

Banana

mango

Attributes of Table Tag

1. Border: It is used to specify a border and its thickness for a table.
2. Cellspacing: It is used to specify the distance between adjacent cells in a table.
3. Cellpadding: it is used to specify the distance between a cell and cell contents in a table.
4. Width: It is used to specify width of a table in pixels or as percentage to screen width.
5. Align: It is used to specify the horizontal alignment of a table. Possible horizontal alignment values are "left", "right" or "center".
6. Valign: It is used to set the vertical alignment of a table as "top", "bottom" or "middle".
7. Bgcolor: It sets the background color of a table. You can specify color names or hex values for the color.

Example of table with border=1, width=200 and align=center attributes

HTML Coding:

<table border="1" width="200" align="center">
<tr>
<th>Book</th><th>Price($)</th>
</tr>
<tr>
<td>Visual Basic</td><td>75</td>
</tr>
<tr>
<td>C++</td><td>45</td>
</tr>
</table>

Book	Price($)
Visual Basic	75
C++	45

Example of table with border=5, cellpadding="10" and cellspacing="10"

<table border="5"  cellpadding="10" cellspacing="10">
<tr>
<th>Book</th><th>Price($)</th>
</tr>
<tr>
<td>Visual Basic</td><td>75</td>
</tr>
<tr>
<td>C++</td><td>45</td>
</tr>
</table>

Book	Price($)
Visual Basic	75
C++	45

 Example table with border="5" width="300" bgcolor="yellow"

<table border="5" width="300" bgcolor="yellow">
<tr>
<th>Book</th><th>Price($)</th>
</tr>
<tr>
<td>Visual Basic</td><td>75</td>
</tr>
<tr>
<td>C++</td><td>45</td>
</tr>
</table>

Book	Price($)
Visual Basic	75
C++	45

Difference between Cellspacing and Cellpadding

Cellspacing and Cellpadding are two important attributes of  <Table> tag. As you know <Table> tag is used to create and display tables in HTML documents.

What is CELLSPACING?

Cellspacing is an important attribute of <Table> tag in HTML. Cellspacing specifies the spacing between adjacent cells in a table. Consider the following example of an HTML table with cellspacing attribute set to 50.

Example of Cellspacing use

<TABLE border="1" cellspacing="30">
<th>Name</th><th>Marks</th>
<tr><td>Sajid Mahmood</td><td>666</td>
<tr><td>Majid Karim</td><td>555</td>
</table>

Name	Marks
Sajid Mahmood	666
Majid Karim	555

Example of Cellspacing=15

<TABLE border="1" cellspacing="15">
<th>Name</th><th>Marks</th>
<tr><td>Sajid Mahmood</td><td>666</td>
<tr><td>Majid Karim</td><td>555</td>
</table>

Name	Marks
Sajid Mahmood	666
Majid Karim	555

Example of Cellspacing=0

<TABLE border="1" cellspacing="0">
<th>Name</th><th>Marks</th>
<tr><td>Sajid Mahmood</td><td>666</td>
<tr><td>Majid Karim</td><td>555</td>
</table>

Name	Marks
Sajid Mahmood	666
Majid Karim	555

What is CellPadding?

Cellpadding is used to specify the distance between a cell contents and its boundaries. For example, consider the following table with cellpadding=0

Example of Cellpadding=0

<TABLE border="1" cellpadding="0">
<th>Name</th><th>Marks</th>
<tr><td>Sajid Mahmood</td><td>666</td>
<tr><td>Majid Karim</td><td>555</td>
</table>

Name	Marks
Sajid Mahmood	666
Majid Karim	555

Example of Cellpadding=20

<TABLE border="1" cellpadding="20">
<th>Name</th><th>Marks</th>
<tr><td>Sajid Mahmood</td><td>666</td>
<tr><td>Majid Karim</td><td>555</td>
</table>

Name	Marks
Sajid Mahmood	666
Majid Karim	555

Example of Cellpadding=50

<TABLE border="1" cellpadding="50">
<th>Name</th><th>Marks</th>
<tr><td>Sajid Mahmood</td><td>666</td>
<tr><td>Majid Karim</td><td>555</td>
</table>

Name	Marks
Sajid Mahmood	666
Majid Karim	555

Use Of Colspan and Rowspan in Tables HTML

Colspan and Rowspan are two important attributes of TD and TH tags used in HTML tables.

Colspan

Colspan is an attribute of TD or TH tags used to make data cells and header cells in an HTML table. We can use Colspan to expand / span a cell on many columns. For example, in the following table, the first header cell spans two columns, so here we use <th colspan="2">Marks</th> to get the required result in the displayed html table.

Marks
Maths	Computer
100	87

The complete HTML coding is as follows:

<table border="1">
<tr> <th colspan="2">Marks</th> </tr>
<tr> <th>Maths</th><th>Computer</th></tr>
<tr> <td>100</td><td>87</td> </tr>
</table>

Rowspan

Rowspan attribute is used to expand or span a cell to multiple rows. For example, in the following table example, the first TH cell (Marks) spans on two rows. We use <th rowspan="2">Marks</th> for this purpose.

Marks	Maths	Computer
	100	87

The complete HTML coding of the table is as follows:
<table border="1">

<tr> <th rowspan="2">Marks</th>

<th>Maths</th><th>Computer</th></tr>

<tr><td>100</td><td>87</td></tr>

</table> 

HTML Table Tag Basics

Tables

Tables are very important to show data in the form of rows and columns. Tables make data more readable and easy to understand. A table consists of rows, columns and cells.

HTML Tags To Make A Table

As we know that there are basically three elements in a table, that is, rows, columns and cells. So, there are the following basic tags to create a table in an HTML web page:

1. <TABLE> tag
2. <TR> tag
3. <TD> tag
4. <TH> tag

 

<TABLE> Tag

<Table> tag is used to specify the start of a table. It also specifies some attributes of the table like ALIGN and BORDER attributes etc.
Example 1: <Table>                    => Table without a border.
Example 2: <Table border="1">     => Table with a border of width 1.
Example 3: <Table align="left" border="2">  => A left aligned Table with a border of width 2.

<TR> Tag

TR stands for TABLE ROW. As the name shows, <TR> tag is used to create a row in a table. A row is started by <TR> tag and is closed by </TR> tag. There are one or more <TD> or <TH> tags between <TR> and </TR> tags to create cells.

Example 1: <TR>
                <TD>1</TD>
                <TD>Ahmad</TD>
                </TR>
Output:

1

Ahmad

Example 2:
              <TR bgcolor="red">
              <TD>1</TD>
                <TD>Ahmad</TD>
               </TR>
Output

1

Ahmad

 

<TD> Tag

<TD> tag is used to create a cell. TD stands for TABLE DATA. In addition, the number of cells in a row will specify number of columns in a table. The data to be shown in a cell is placed between <TD> and </TD> tags.

Example 1: <TD>Ahmad</TD>
Example 2: <TD bgcolor="yellow">345</TD>
Example 3: <TD width="100">Nasir</TD>

<TH> Tag

<TH> tag is used to create a header row in a table. TH stands for TABLE HEADING.One <TH> tag makes one header cell. The data to be shown in header cell is placed between <TH> and </TH> tags.


Example 1: <TH> Roll No </TH>
Example 2: <TH bgcolor="yellow">Name</TH>
Example 3:
<TR>
<TH>Roll Number</TH>
<TH>Name</TH>
<Th Marks</TH>
</TR>
Output:

Roll Number	Name	Marks

A Complete Table Example Code and Output in Browser

HTML sample Code	Output in web browser
<table border="4"> <tr> <th>Roll Number</th> <th>Name</th> <th>Marks</th> </tr> <tr> <td>1</td> <td>Ahmad</td> <td>700</td> </tr> </table>	Roll Number Name Marks 1 Ahmad 700

Different Types of Text Formatting Tags in HTML

There are many Text formatting tags available in HTML. You can format your text as:

• Bold Text
• Italic Text
• Underline Text
• Superscript Text
• Subscript Text

Let us discuss these formatting tags one by one with example html source code and the output in web browser.

1. Bold Text

<b> tag is used for formatting the text as bold text. You place the text within <b> and </b> tags to make it bold.

2. Italic Text

<i> tag is used for formatting the text as italic text. You place the text within <i> and </i> tags to make it italic.

3. Underline Text

<u> tag is used for formatting the text as underline text. You place the text within <u> and </u> tags to make it underline.

4. Superscript Text

<sup> tag is used for formatting the text as superscript text. You place the text within ^and tags to make it superscript.

5. Subscript Text

<sub> tag is used for formatting the text as bold text. You place the text within _and tags to make it subscript.

HTML Formatting Tags Source Code Examples

HTML Formatting Tags	Output in web browser
<b>Bold Text</b> <i>Italic Text</i> <u>Underline Text</u> Superscript Example X Squared= X<sup>2</sup> Subscript Example X base 2= X<sub>2</sub>	Bold Text Italic Text Underline Text Superscript Example X Squared= X2 Superscript Example X base 2= X2

Types Of Headings In HTML

HTML Hedings

Headings in HTML are used to display Titles, Sub-Titles of Sub-Sub-Titles for your web page text. There are six types of headings in HTML. H1 is the largest heading and H6 is the smallest heading. <H1> is opening tag whereas </H1> is the closing tag for the largest heading. The text between <h1> and </h1> will be displayed as the main Title in your web page. Following are the six tags used for six types of headings in HTML.

1. <H1> ... </H1>
2. <H2> ... </H2>
3. <H3> ... </H3>
4. <H4> ... </H4>
5. <H5> ... </H5>
6. <H6> ... </H6>

The H1 heading is used for main titles. Actually H1 heading will show the text in largest font size. H2 headings is used for Sub-Titles. H2 displays text in smaller font size than H1, H3 displays text of font size smaller than H1 and H2, and so on. H1 is for largest heading in a text page and H6 is for smallest heading.  

Importance Of Headings in SEO

Headings are important not only, for specifying Titles and Sub titles in a web page, but they play an important role to enhance Search Engine Optimization of your web page in major Search engines like Google and Yahoo. Search engines use your headings, especially H1 and H2 headings, to index the structure and content of your web pages. Therefore, proper use of headings may improve your web page's search engine optimization.

Example HTML Code and Output

HTML Code for Six Headings	Output in Web browser
<h1>First Heading</h1> <h2>Second Heading</h2> <h3>Third Heading</h3> <h4>Fourth Heading</h4> <h5>Fifth Heading</h5> <h6>Sixth Heading</h6>	First Heading Second Heading Third Heading Fourth Heading Fifth Heading Sixth Heading