Table in html In many case we need to create table using html . We Create table by using html by Table tag. If we present information in a...
Table in html
In many case we need to create table using html. We Create table by using html by Table tag. If we present information in a table that makes easier to understand and makes beautiful to watch. In table using rows and columns information is presented.
Table creation importance
To the viewer’s we present information in the formats which makes easier to understand, increases attraction. In paragraph form information are shown but some are same typed and if these are kept in table then it becomes user friendly.
Rows are horizontal and columns are vertical linear structure.
Table tag
In html we Create table by using html <table>…. </table> tag.
With this tag more tags are used such as <th>…</th>,<tr>…..</tr>,<td>…..</td> etc.
html table basic structure
<!DOCTYPE html>
<html>
<head><title>Table making in html</title</head>
<body>
<table>
</table>
</body>
</html>
If we save this code in a Text document with .html extension and then open with a browser we will not show any output in view because we didn't created any rows and also didn't inserted any data.
Here is uses of different tags into table tag
caption tag(<caption>….<caption>)
It is table caption. In a table which type of information has given is told here.th tag (<th>….</th>)
It is table heading. In the upper side of every column it is given for knowing user about information have given in the column.tr tag(<tr>……</tr>)
tr is the short form of table row. It is used for making each row of a table.
Attribute align is used for showing the contents in left or right or in the center position in the row.td tag(<td>…..</td>)
td is the short form of table data. For writing any content or information in the table we use td tag. By this tag in rows columns are created. If we use one td tag into tr tag then one cell or column will created. Attribute align is used for showing the contents in left or right or in the center position in the column.tfoot tag (<tfoot>)
tfoot tag is used for adding footer in the table.Attributes used into table (<table>…</table>) tag
Attributes presents the information in the table well and properly. Some Attributes used into table tag are given below-
border attribute
Border attribute is used for making border in the table. By default the size of border saved as 1.
Example: < table border ="3"> ,
Example: < table border ="3"> ,
width attribute
This is used for increasing or decreasing the width of the table. Its value represented with percentage or pixel.
Example: < table width ="50%"> ,
Example: < table width ="50%"> ,
align attribute
For setting the perfect alignment align attribute is used. This ensures the position of the table in the page (left, right, center). Table align attribute defines the horizontal positions only.
Example: < table align ="left"> ,
Example: < table align ="left"> ,
cellspacing attribute
It is used for keeping empty spaces into the cells.
< table cellspacing="4">
< table cellspacing="4">
cellpadding attribute
It is used for keeping empty spaces between cell and cell content.
< table cellpadding="4">
< table cellpadding="4">
bgcolor attribute
By using bgcolor attribute background color of the table can be set.
I 3 way we can set background color
By color names: red,blue,green,yellow
By hexadecimal codes: "#0000FF"
Example
<table border = "2" bgcolor ="#0000FF">
<table border = "3" bgcolor ="blue">
Example
<table border = "2" bgcolor ="#0000FF">
<table border = "3" bgcolor ="blue">
Example
<!DOCTYPE html>
<html>
<head><title>Table making in html</title></head>
<body>
<table border ="2"width ="50%"align ="center"cellspacing="4"cellpadding="4"bgcolor ="#0000FF">
<caption>Here is the capitals</caption>
<tr><th>Country</th><th>Capital</th></tr>
<tr><td>Australia</td><td>Canberra</td></tr>
<tr><td>India</td><td>New Delhi</td></tr>
<tr><td>New Zealand</td><td>Wellington</td></tr>
<tr><td>Bangladesh</td><td>Dhaka</td></tr>
</table>
</body>
</html>
Saving this in .html file we will see output like this
Over all, you can Create table by using html by following these rules
<!DOCTYPE html>
<html>
<head><title>Write page title</title></head>
<body>
[ Opening Table tag starts]<table
border ="Write the border size"
width ="Write the width size in percentage or in pixel "
align ="Select center / left /right"
cellspacing="Set empty spaces into the cells"
cellpadding="Set empty spaces between cell and cell content"
bgcolor ="Write color name or hexadecimal color code">[ Opening Table tag ends]
<caption>Give here table caption</caption>
<tr><th>Heading for column</th>.......<th>Heading for column</th></tr> [Headings for column]
<tr><td>Table content</td>........<td>Table content</td></tr> [Number of cells in the row= number of headings]
..................................................................................................
..................................................................................................
..................................................................................................
..................................................................................................
<tr><td>Table content</td>........<td>Table content</td></tr> [Last row]
</table>[Table tag ends]
</body>
</html>
No comments