HTML table

Use of  table is very important to make web page attractive.  Any number or data can be presented through the table easily. With the help of the HTML table model, we can equip data in tabular structure. Because of the horizontal rows and vertical columns are used.

Table structure:

html table picture

A table is divided into several rows, and each row is divided into a variety of cells. Each table can have related caption, which provides a brief description of the purpose of the table. There is a wide range of cells in multiple rows and columns.

Create table:

Table tag is needed to create a table. Tags are the requirements to create a common table.
1.  <table>….</table> [The environment is created in web page making a table.]
2. <th>……….</th> [You can give heading or title  in the table.]
3 <tr>…………</tr> [The row of the table is made.]
4. <td>………..</td> [Information is presented in the table cell.]

The table layout structure is shown in the image below.

table layout structure

Example:1

HTML code:

<html>
<body>
<style>body{font-family:Verdana;}</style>
<table>
<tr><td>Type</td><td>Manufacturer</td><td>Price</td></tr>
<tr><td>Laptop</td><td>Dell</td><td>$850</td></tr>
<tr><td>Laptop</td><td>Toshiba</td><td>$750</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$800</td></tr>
</table>
</body>
</html>

Display in Browser:

Type Manufacturer Price
Laptop Dell $850
Laptop Toshiba $750
Laptop HP $800

 

Table header:

Table heading, Create a separate model from another part of the table, As a result, You can get a full idea about the topics presented in the column and row. For this <th> tag is needed and format is  <th>….</th. In the middle of the tag <th></th> what should be written would be considered header.

Example:2

Type the following codes in Notepad. Now table_header.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML code:

<!DOCTYPE html>
<html>
<body>
<style>body{font-family:verdana;}</style>
<table>
<tr>
		<th>Question</th>
		<th>Answer</th>
		<th>Correct?</th>
</tr>
<tr>
		<td>What is your father name?</td>
		<td>Megnath karmakar</td>
		<td>Yes</td>
</tr>
<tr>
		<td>What is your name?</td>
		<td>Rakes karmakar</td>
		<td>Yes</td>
</tr>
</table>
</body>
</html>

Display in Browser:

Question Answer Correct?
What is your father name? Megnath karmakar Yes
What is your name? Rakes karmakar Yes

 

Table caption:

Caption understand the meaning of a title is added to the table, which is on the table.The meaning of caption is added a title understand to the table, which is on the table generally. To see the title of the table concept can be achieved at the moment about the content recorded in the table very easily. For this used tag is <caption></caption> and format is  <caption>….</caption>

Between the tag  <caption></caption> what will be written  would be count as the title. By default, the title will be on the table of the left side.

If you would like to place the title on the table, between the table or at the right side of the table the format will be  <caption align=”right/top/bottom”>…..</caption>

Caption bold, italic, underline that if you want to caption bold, italic, underline that the format as follows: <caption <b>……</b></caption>

If you want to Caption font color the format will be as below: <caption <font color=”red”>……</font></caption>

Example:

Type the following codes in Notepad. Now table_caption.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<!DOCTYPE html>
<html>
<body>
<style>body{font-family:verdana;}</style>
<table>
<caption>Information of Table </caption>
<tr>
		<th>Question</th>
		<th>Answer</th>
		<th>Correct?</th>
</tr>
<tr>
		<td>What is the capital of Banglades?</td>
		<td>Dhaka</td>
		<td>Yes</td>
</tr>
<tr>
		<td>What is your name?</td>
		<td>Putul</td>
		<td>Yes</td>
</tr>
</table>
</body>
</html>

Display in Browser:

Information of Table
Question Answer Correct?
What is the capital of Banglades? Dhaka Yes
What is your name? Putul Yes

 

Table border:

By default, Any Border is not created in the table. Border means that table as well as the  across side of each cell to be bound by line. For this, Border attributes are added to the starting tag of the table. How wide the border will depend on the value of the border attribute. The format of the border attribute is  <table border=”1″…..</table>

Here 1 has been given the value of border. The value of the higher the four side borders of the  table will be as more wide. If value is Zero or -1 border will not be added.

Box and Border (Displays all sides)

<table border=”5″ frame=”box” style=”margin-bottom: 10px;”>
or <table border=”5″ frame=”border”>
<table border=”5″ rules=”none”> (remove all inner borders)
<table border=”5″ rules=”rows”> (Displays borders between rows only)
<table border=”5″ rules=”cols”> (Displays borders between columns only)
<table border=”5″ rules=”groups”> (Displays borders between groups only)
<table border=”5″ rules=”all”> (Displays borders between all cells)

Example:

Type the following codes in Notepad. Now table_border.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<!DOCTYPE html>
<html>
<body>
<style>body{font-family:verdana;}</style>
<table border="1">
<h3>Information of Table</h3>
<tr>
		<th>Question</th>
		<th>Answer</th>
		<th>Correct?</th>
</tr>
<tr>
		<td>What is your father name?</td>
		<td>Megnath karmakar</td>
		<td>Yes</td>
</tr>
<tr>
		<td>What is your name?</td>
		<td>Rakes karmakar</td>
		<td>Yes</td>
</tr>
</table> 
</body>
</html>

Display in Browser:

table border

Table size:

The table how much space it will occupy across the screen of web page horizontally and vertically for determining wide and hide attribute and as a value to use PX or percent. Otherwise, the browser will display table according to his need. For this the format is <table border=1 width/height =px or 50%>

<table width=”50% or 50px”> [ According to percent or pixel the width of the table will be changed.]

<table height=”50% or 50px”>[ According to percent or pixel the height of the table will be changed]
<th width/height=”50% or 50px”>[ According to percent or pixel width parts of the header / height  will be changed.]
<td width/height=”50% or 50px”>[ to percent or pixel the width/height of the table will be changed.]

<table border=1 width=”640″ height=”300px”>[ According to value the width of the table will be changed.]

Here has been shown at 50 %. This means that the window size with the change in according the percent size of the table will change. Suppose the window is 100 percent, then the table will be displayed across 50 percent of full screen.]

Example

HTML code:

<html>
<body>
<style>body{font-family:Verdana;}</style>
<table border="1">
<tr><td width="33%">Type</td>
<td width="33%">Manufacturer</td>
<td width="33%">price</td></tr>
<tr><td>Laptop</td><td>Dell</td><td>$850</td></tr>
<tr><td>Laptop</td><td>Toshiba</td><td>$750</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$800</td></tr>
</table>
</body>
</html>

Display in Browser:

table size

Table, Cell Width, Percentage:

Type the following codes in Notepad. Now table_size.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

Table Align:

By default, the table is positioned along the left margin. It can be displayed in the middle or right side using the align attribute with the start tag of the table. The format for this is as follows:

<table align=”left”>
<table border=”1″ align=”right”>
<table border=”1″ align=”center”>

Caption Attribute:
align= top| bottom| left| right
<caption align=top> or <caption align=bottom style=”text-align: right”>

Example: Center align

Type the following codes in Notepad. Now table_align.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<!DOCTYPE html>
<html>
<body>
<table border="1" align="center" width="500">
<caption align="bottom"> Figure: Table Information </caption>
<tr>
		<th>Question</th>
		<th>Answer</th>
		<th>Correct?</th>
</tr>
<tr>
		<td>What is your father name?</td>
		<td>Megnath karmakar</td>
		<td>Yes</td>
</tr>
<tr>
		<td>What is your name?</td>
		<td>Rakes karmakar</td>
		<td>Yes</td>
</tr>
</table> 
</body>
</html>

Display in Browser:

Figure: Table Information
Question Answer Correct?
What is your father name? Megnath karmakar Yes
What is your name? Rakes karmakar Yes

 

Table space:

Four sides of the table keep free space or content can be added using the vspace and hspace attribute.

Coding format:

<table vspace=”” hspace=””>
vspace:20px
<table border=”1″ align=”left” vspace=”20″>
hspace:20px
<table border=”1″ align=”left” hspace=”20″>
vspace:20px, hspace:20px
<table border=”1″ align=”left” vspace=”20″ hspace=”20″

Type the following codes in Notepad. Now table_space.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<html><head></head><body>
<style>body{font-family:Verdana;}</style>
<table hspace="20" border="1" align="left">
<tbody><tr><td>Type</td><td>Manufacturer</td><td>Price</td></tr>
<tr><td>Laptop</td><td>Dell</td><td>$850</td></tr>
<tr><td>Laptop</td><td>Toshiba</td><td>$750</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$800</td></tr>
</tbody></table>
Laptop computers,also called notebooks, are portable computers that you just will take with you and use in several environments.

</body></html>

Display in Browser:

table space

Table background:

The background of the table can be divided into two. For example, the table of background can be added for color and as background image can be added. Using BG color attributes color can be added in a table or row and cell. For this the  name of color or color code is set with the BG color attribute.

Example:
<table bgcolor=”red or #99CC99″>
<tr bgcolor=”green or #99CC99″>
<td bgcolor=”silver or #99CC99″>
<table bgcolor=”red or #99CC99″>
You can use  the width attribute  with table color  to determine the width of a table.

<table border=”1″ width=”100%” bgcolor=”#800ffff”>
<table style=”background-color: #eeeeee”
<table border=”1″ style=”width: 500px; background-color: orange”>

HTML Code:

<!DOCTYPE html>
<html>
<body>
<style>body{font-family:verdana;}</style>
<table border="1" style="background-color: silver;">
<caption>Information of Table </caption>
<tr>
		<th>Question</th>
		<th>Answer</th>
		<th>Correct?</th>
</tr>
<tr>
		<td>What is the capital of Banglades?</td>
		<td>Dhaka</td>
		<td>Yes</td>
</tr>
<tr>
		<td>What is your name?</td>
		<td>Putul</td>
		<td>Yes</td>
</tr>
</table>
</body>
</html>

Display in Browser:

Information of Table
Question Answer Correct?
What is the capital of Banglades? Dhaka Yes
What is your name? Putul Yes

 

Cell spacing:

If you want to create distance between the cells, with the starting tag of the table is mentioned to cell spacing attribute and value (number). The higher of  the value, the more distance will increase. If value is 1 the distance of cells will increase the amount of 1 pixel.

Coding format :

<table cellspacing=”1″>
<table cellspacing=”0″>
<table border=”1″ cellspacing=”1″>

Example:

Type the following codes in Notepad. Now table_cellspacing.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<!DOCTYPE html>

<html>
<body>
<style>body{font-family:verdana;}</style>
<table border="1"  bgcolor ="silver" cellspacing="20">
<caption>Information of Table </caption>
<tr>
		<th>Question</th>
		<th>Answer</th>
		<th>Correct?</th>
</tr>
<tr>
		<td bgcolor="white">What is your district name?</td>
		<td bgcolor="white">Gazipur</td>
		<td bgcolor="white">Yes</td>
</tr>
<tr>
		<td bgcolor="white">What is your name?</td>
		<td bgcolor="white">Ratul</td>
		<td bgcolor="white">Yes</td>
</tr>
</table>
</body>
</html>

Display in Browser:

cell spacing

Cell padding:

Distance from cell to cell border, with the starting tag of the table is mentioned to cell padding attribute and value (number). If the value is 1 the amount of pixel 1 will increase of the cell distance from the cell border. The higher of  the value, the more distance will increase.

Coding format:

<table cellpadding=”1″> or, <table border=”1″ cellpadding=”1″>

Example:

Type the following codes in Notepad. Now table_cellpadding.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<!DOCTYPE html>
<html>
<body>
<style>body{font-family:verdana;}</style>
<table border="1"  bgcolor ="silver" cellpadding="15">
<caption>Information of Table </caption>
<tr>
		<th>Question</th>
		<th>Answer</th>
		<th>Correct?</th>
</tr>
<tr>
		<td bgcolor="white">What is your district name?</td>
		<td bgcolor="white">Gazipur</td>
		<td bgcolor="white">Yes</td>
</tr>
<tr>
		<td bgcolor="white">What is your name?</td>
		<td bgcolor="white">Ratul</td>
		<td bgcolor="white">Yes</td>
</tr>
</table>
</body>
</html>

Display in Browser

cell padding

 Call group and call:

This call group and call tags set table header, table footer and the body on the table (these are mainly upper part, lower part and main part.) The top area, bottom area and the main area of these three tags are used to create sections of rows. Call group and as a call is used for the column.

<colgroup>…….</colgroup>
<colgroup span=”3″>…..</colgruop>
<colgroup align=”center” width=”250″style=”background-color:#80ff80″></colgroup>

<colgroup span=”3″ align=”right” width=”120″ style=”background-color:#ffffff”></colgroup>
<colgroup width=”80%”></colgroup>
<colgroup width=”25%” span=2 align=center></colgroup>
<colgroup width=”10%” span=2 align=center></colgroup>

Example :

Type the following codes in Notepad. Now table_callgroup.html or into any name, only use .html as the file extension to store in any folder or directory on your computer. When you open the file, you will see the output shown below.

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>HTML columngroup</title>
</head>
<style type="text/css">
col{background-color: powderblue;}
col+col {background-color: silver; font-weight: bold;}
th{font-variant:small-caps;}
</style>
<body>
<table width="100%" cellpadding="5" cellspacing="5">
<colgroup>
<col span="2"/>
<col/>
</colgroup>
<tr><th>Type</th><th>Manufacturer</th><th>Price</th></tr>
<tr><td>Laptop</td><td>Dell</td><td>$850</td></tr>
<tr><td>Laptop</td><td>Toshiba</td><td>$750</td></tr>
<tr><td>Laptop</td><td>HP</td><td>$800</td></tr>
</table>
</body>
</html>

Display in Browser:

colgroup and col

Leave a Reply

Your email address will not be published. Required fields are marked *