HTML Tables – How to Insert Table in HTML with Examples

0
196

In this tutorial you will learn how to add HTML Table in a web page. Table is an important element of web pages. Sometimes , you may have to present data in tabular form on your website.

HTML Table Elements

Basically an HTML Table have 2 elements. One is table rows and second is table columns with cells. HTML table start with <table> tag.

Table Rows and Table Columns with Cells in HTML

In HTML table <tr> tag is used to define a table row. Inside this table row there is a tag <td> is used to define a cell in that row. See Syntax and Example to understand this concept.

Syntax of Table in HTML

<table>

<tr>

<td> First Cell in First Row </td>

<td> Second Cell in First Row </td>

<td> Third Cell in First Row </td>

</tr>

<tr>

<td> First Cell in Second Row </td>

<td> Second Cell in Second Row </td>

<td> Third Cell in Second Row </td>

</tr>

</table>

Example of HTML Table

Code

HTML Simple Table

Output

Simple Table Output

Attributes of Table Tag in HTML

In above example you have seen it’s not looking like table. It’s appearing as the simple text in the browser. So how we can make it to look like a table in the browser ? . It’s by applying Attributes on table tag.

Border Attribute in Table Tag

You can apply border to a table to look a better table then the simple text. Applying border to a table is same as applying border to an image. See example below.

Code

Border Attribute in Table

Output

Border output

Now check the output of above example. It’s a better table than the previous simple table.

Width and Height Attribute of Table

You can also apply width and height to a table in HTML. See example below.

Code

Width and Height in Table

Output

Width and Height in Table Output

Cellpadding Attributes in Table

Now in above output you have seen that text in table cells is looking ugly. So now it’s time to make it more beautiful. We can do so by applying cellpadding attribute to table. See example below.

Code

cellpadding in table

Output

cellpadding output

Cellspacing Attribute in Table

What if you want to have space between two cells of the same or different row ?. For this purpose you can use an attribute called “cellspacing” to HTML table. See example and note the difference between simple table and a table having cellspacing.

Code
Cellspacing Attribute in Table

Output

cellspacing output

Background Color Attribute in Table

You can also apply background color to a table in HTML. Just use bgcolor attribute inside table tag to change the background color of table. See example below.

Code

bgcolor attribute of table

Output

background color in table

Headings in a Table

You can also insert headings of a table by adding <th> tags in first row of table. Tag <th> stands for table heading. See example of table headings.

Code

table headings

Output

table headings output

Caption Tag in Table

You can add information about table by using caption tag. Caption tag will tell what is this table about. See example of caption.

Code

caption tag in table

Output

caption output

Rowspan and Cellspan Attributes

If you want to have a cell in a row that will have the height of two or more rows then you can use rowspan attribute inside <td> tag. If you wish to have a row that will have width of two or more cells you have to insert colspan attribute inside <tr> tag. Remember that rowspan can only be used inside <td> tag and colspan can only be used inside <tr> tag. See example below.

Code

cellspan and rowspan in HTML

Output

cellspan and rowspan output

Division of Table

You can divide table into three sections to write clearly. These three sections will be table head using <thead> , table body using <tbody> and table footer using <tfooter> tags. By using these tags you can write code for tables very easily. See example of dividing table into sections.

Code

table division

Output

table division output

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here