Hello Readers / Friends,
Welcome back to CodeEra. Hope you have understand Link used in HTML in the Previous blog. So lets Begin with new topic that is HTML Table which is used to create new table even we can make header and footer with this.
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="1">
<tr>
<td>Rohit </td><td>Adhikary</td>
</tr>
</table>
</body>
</html>
See You in Next Page.
Welcome back to CodeEra. Hope you have understand Link used in HTML in the Previous blog. So lets Begin with new topic that is HTML Table which is used to create new table even we can make header and footer with this.
There are different type used in Table :-
1) Cell
2) Row
3) Column
4) Header Cell
5) Body Cell
6) Caption
7) Header Row
8) Footer Row
4) Header Cell
5) Body Cell
6) Caption
7) Header Row
8) Footer Row
There are Some attribute used in a Table are as follows :-
1) <caption> ...... </caption>------ cell
2) <tbody> ...... </tbody> ---------- table body
3) <thead> ...... </thead> ----------- table head
4) <tfoot> ....... </tfoot> ------------ table footer
5) <table> ...... </table> ------------ to start table
6) <tr> ..... </tr> ----------------------- row of table
7) <td> .... </td> ----------------------- cell
8) <th> .... </th> ----------------------- heading in the cell
1) Basic Table
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="1">
<tr>
<td>Rohit </td><td>Adhikary</td>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
Download File - table 1.html
2) Basic Table
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="1">
<tr>
<td>Rohit </td><td>Adhikary</td>
</tr>
<tr>
<td>Ram </td><td>Kumar</td>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
Download File -table 2.html
3) Using Caption in Table
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="1">
<caption> This is demo table </caption>
<tr>
<th>F.name</th><th>L.name</th>
</tr>
<tr>
<td>Rohit </td><td>Adhikary</td>
</tr>
<tr>
<td>Ram </td><td>Kumar</td>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
Download File - table 3.html
4) Header and Footer of the Table
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="1">
<caption> This is demo table </caption>
<thead>
<tr><td>Header of table</td></tr>
</thead>
<tfoot>
<tr><td>Footer of table</td></tr>
</tfoot>
<tr>
<th>F.name</th><th>L.name</th>
</tr>
<tr>
<td>Rohit </td><td>Adhikary</td>
</tr>
<tr>
<td>Ram </td><td>Kumar</td>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
5) Using alignment
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="1" align="center"> <!-- align three type => "left" , "right" , "center"-->
<caption> This is demo table </caption>
<thead>
<tr><td>Header of table</td></tr>
</thead>
<tfoot>
<tr><td>Footer of table</td></tr>
</tfoot>
<tr>
<th>F.name</th><th>L.name</th>
</tr>
<tr>
<td>Rohit </td><td>Adhikary</td>
</tr>
<tr>
<td>Ram </td><td>Kumar</td>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
Download File - table 5.html
6) Using background Color
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="1" align="center"> <!-- align three type => "left" , "right" , "center"-->
<caption> This is demo table </caption>
<thead bgcolor="yellow">
<tr><td>Header of table</td></tr>
</thead>
<tfoot bgcolor="yellow">
<tr><td>Footer of table</td></tr>
</tfoot>
<tr bgcolor="red">
<th>F.name</th><th>L.name</th>
</tr>
<tr bgcolor="green">
<td>Rohit </td><td>Adhikary</td>
</tr>
<tr bgcolor="green">
<td>Ram </td><td>Kumar</td>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
Download File - table 6.html
7) Using Cellspacing and Cellpadding in Table
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="1" align="center" cellspacing="2" cellpadding="15"> <!-- align three type => "left" , "right" , "center" CellSpacing / CellPadding is the gap -->
<caption> This is demo table </caption>
<thead bgcolor="yellow">
<tr><td>Header of table</td></tr>
</thead>
<tfoot bgcolor="yellow">
<tr><td>Footer of table</td></tr>
</tfoot>
<tr bgcolor="red">
<th>F.name</th><th>L.name</th><th>Country</th>
</tr>
<tr bgcolor="green">
<td>Rohit </td><td>Adhikary</td><td>India</td>
</tr>
<tr bgcolor="green">
<td>Ram </td><td>Kumar</td><td>India</td>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
8) Using Colspan in Table
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="4" align="center" cellspacing="2" cellpadding="15"> <!-- align three type => "left" , "right" , "center" CellSpacing / CellPadding is the gap -->
<caption> This is demo table </caption>
<thead bgcolor="yellow" >
<tr ><td colspan="3">Header of table</td></tr> <!-- colspan is to make equal in all cell -->
</thead>
<tfoot bgcolor="yellow">
<tr ><td colspan="3">Footer of table</td></tr> <!-- colspan is to make equal in all cell -->
</tfoot>
<tr bgcolor="red">
<th>F.name</th><th>L.name</th><th>Country</th>
</tr>
<tr bgcolor="green">
<td>Rohit </td><td>Adhikary</td><td>India</td>
</tr>
<tr bgcolor="green">
<td>Ram </td><td>Kumar</td><td>India</td>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
Download File - table 8.html
9) Using Rowspan in Table
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
<table border="4" align="center" cellspacing="2" cellpadding="15"> <!-- align three type => "left" , "right" , "center" CellSpacing / CellPadding is the gap -->
<caption> This is demo table </caption>
<thead bgcolor="yellow" >
<tr ><td colspan="3">Header of table</td></tr> <!-- colspan is to make equal in all cell -->
</thead>
<tfoot bgcolor="yellow">
<tr ><td colspan="3">Footer of table</td></tr> <!-- colspan is to make equal in all cell -->
</tfoot>
<tr bgcolor="red">
<th>F.name</th><th>L.name</th><th>Country</th>
</tr>
<tr bgcolor="green">
<td>Rohit </td><td>Adhikary</td><td>India</td>
</tr>
<tr bgcolor="green">
<td>Ram </td><td>Kumar</td><td>India</td>
</tr>
</table>
<table border="4" align="center" cellspacing="2" cellpadding="15"> <!-- align three type => "left" , "right" , "center" CellSpacing / CellPadding is the gap -->
<caption> This is demo table </caption>
<tr >
<tr bgcolor="red" ><th rowspan="4">Header of table</th></tr> <!-- colspan is to make equal in all cell --><th>F.name</th><th>L.name</th><th>Country</th>
</tr>
<tr bgcolor="green">
<th>Rohit </th><th>Adhikary</th><th>India</th>
</tr>
<tr bgcolor="green">
<th>Ram </th><th>Kumar</th><th>India</th>
</tr>
</table>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
In Next Page , I will give you more examples for HTML coding and with new Topic.
Till then If you are having any doubt / Queries then you can comment below or send me in my mail i will clear your doubt.
See You in Next Page.