Creating HTML Table

 CHAPTER – 4

The  HTML table tag is used for  ​arranging the data in the form of rows and columns, or possibly in a more complex structure. The HTML tables are created using the <table> tag in which the <th> tag is used for heading in the table row, <tr> tag is used to create table rows and <td> tag is used to create data under rows cells. The elements under <td> are regular and left aligned by default.

Defining tables in HTML

The HTML table is defined with the <table> tag. The Important tages should be follow while creating features of a table:

1.   <tr> tag is used to define each row in a table.

2.   <th> tag is used to define headers of a table and comes top of the table row.

3.   <td> tag is used to define a table data or a cell.

By default, table headings are bold and centered aligned while data is non-bold and left aligned.

 

HTML: <caption> tag

The HTML <caption> tag defines the title of a table in the HTML document. Browsers traditionally render the text found in the <caption> tag above the table.

 

HTML Table Border

The html table tag does  not show border by default. You can apply border around the  table by using the HTML border attribute. You cab apply the width of the border using a number. For example, for a thin border, use the number "1". For a thicker border, use a greater number like 2,3,4.

 

The Background Property

The background property of the table is used to color the whole table , single row also even a cell.

Syntax

In HTML, the syntax for the <table> tag background color is:

<table bgcolor=”green”>

HTML Table Width

The width attribute specifies the width of a table or the width of a table cell. The width can be set either as an absolute value in pixels, or as in percentage (%). If the width attribute is not set, it will takes up the space of longest single word in each cell.

 

1. Table width in pixels

<table border=1 width=50>

Output according to pixels

 

2. Table width in percentage (%)

<table border=1 width=50%>

Output according to percentage

 

Note: Now you can compare both pixel and percentage difference

 Source Code of the HTML Table:

Output:

 

      Blog Disclaimer :

This is a personal blog. Any views or opinions represent in this blog are web based search information,personal teaching experience and belong solely to the blog owner. All contents provided on this blog is for informational purpose only.