..
Write the same code in a note pad or other text editor and save it with html extention. Open the saved file on your google crome or Mozila browser to see the output.
- <!DOCTYPE html>
- <table></table> This code define table and we can also specify size of table
<tr></tr> This code define a row
<td></td> This code define a colum within a row - <html>
- <head>
- <title>Gyan Tutorial Example</title>
- </head>
- <body>
- <h3>Using only Table BORDER</h3>
- <table style="width:30%; border:1px solid black; text-align:center">
- <tr>
- <th>Milon</th>
- <td>Sen</td>
- <td>17</td>
- </tr>
- <tr>
- <th>Addum</th>
- <td>Gupta</td>
- <td>14</td>
- </tr>
- <tr>
- <th>Gupta</th>
- <td>Sen</td>
- <td>28</td>
- </tr>
- </table>
- <h3>Using only TD BORDER</h3>
- <table style="width:30%; text-align:center">
- <tr>
- <th style="border:1px solid black">Milon</th>
- <td style="border:1px solid black">Sen</td>
- <td style="border:1px solid black">17</td>
- </tr>
- <tr>
- <th style="border:1px solid black">Addum</th>
- <td style="border:1px solid black">Gupta</td>
- <td style="border:1px solid black">14</td>
- </tr>
- <tr>
- <th style="border:1px solid black">Gupta</th>
- <td style="border:1px solid black">Sen</td>
- <td style="border:1px solid black">28</td>
- </tr>
- </table>
- <h3>Using both Table and TD BORDER</h3>
- <table style="width:30%; border:1px solid black; text-align:center">
- <tr>
- <th style="border:1px solid black">Milon</th>
- <td style="border:1px solid black">Sen</td>
- <td style="border:1px solid black">17</td>
- </tr>
- <tr>
- <th style="border:1px solid black">Addum</th>
- <td style="border:1px solid black">Gupta</td>
- <td style="border:1px solid black">14</td>
- </tr>
- <tr>
- <th style="border:1px solid black">Gupta</th>
- <td style="border:1px solid black">Sen</td>
- <td style="border:1px solid black">28</td>
- </tr>
- </table>
- <h3>Using COLSPAN</h3>
- <table style="width:30%; border:1px solid black; text-align:center">
- <tr>
- <th style="border:1px solid black">Name</th>
- <th style="border:1px solid black">Roll</th>
- <th style="border:1px solid black">Class</th>
- </tr>
- <tr>
- <td style="border:1px solid black">Sunirmal Dutta</td>
- <td style="border:1px solid black">5</td>
- <td style="border:1px solid black">IX</td>
- </tr>
- <tr>
- <td style="border:1px solid black">Debraj Sen</td>
- <td style="border:1px solid black">6</td>
- <td style="border:1px solid black">XI</td>
- </tr>
- <tr>
- <td colspan="2" style="border:1px solid black">Total Students</td>
- <td style="border:1px solid black">2</td>
- </tr>
- </table>
- <h3>Using both COLSPAN and ROWSPAN</h3>
- <table style="width:30%; border:1px solid black; text-align:center">
- <tr>
- <th colspan="3" style="border:1px solid black">Resume</th>
- </tr>
- <tr>
- <td style="border:1px solid black">Full Name</td>
- <td style="border:1px solid black">Sunirmal Dutta</td>
- <td rowspan="3" style="border:1px solid black">Photo</td>
- </tr>
- <tr>
- <td style="border:1px solid black">Address</td>
- <td style="border:1px solid black">Konnagar</td>
- </tr>
- <tr>
- <td style="border:1px solid black">Date of Birth</td>
- <td style="border:1px solid black">28 July 1998</td>
- </tr>
- </table>
- </body>
- </html>