Creating Tables in HTML
To create a table in HTML use <table> element. It has the attribute border to specify width of border of cells of the table. Within the table to create rows use <tr> element and within the row to create headings use <th> element and to create data use <td> element. Both <th> and <td> elements support attributes colspan and rowspan to merge the cells horizontal and vertical. To set a caption for the table use <caption> element immediately next to <table> element.
Example : The following example demonstrates how to create a table
<!doctype html>
<html>
<body>
<table border=”1”>
<caption> Student Information </caption>
<tr>
<th> Student Id </th>
<th> Student Name </th>
<th> Course </th>
</tr>
<tr>
<td> 1001 </td>
<td> A </td>
<td> .NET </td>
</tr>
<tr>
<td> 1002 </td>
<td> B </td>
<td> JAVA </td>
</tr>
<tr>
<td> 1003 </td>
<td> C </td>
<td> PHP </td>
</tr>
</table>
</body>
</html>
<!doctype html>
<html>
<body>
<table border=”1”>
<tr>
<th></th>
<th>9AM</th>
<th>10AM</th>
<th>11AM</th>
<th>12PM</th>
</tr>
<tr>
<th> Monday </th>
<td>.Net</td>
<td>Java</td>
<td>PHP</td>
<td>Oracle </td>
</tr>
<tr>
<th> Tuesday </th>
<td colspan=”2”>.Net</td>
<td>Java</td>
<td>PHP</td>
</tr>
<tr>
<th> Wednesday </th>
<td>.Net</td>
<td>CPP</td>
<td colspan=”2”>PHP</td>
</tr>
</table>
</body>
</html>
Example : The following example demonstrates how to merge cells in the table vertical using rowspan attribute.
<!doctype html>
<html>
<body>
<table border=”1”>
<tr>
<th></th>
<th>TV9</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6PM – 7PM</th>
<th rowspan=”2”>Movie</th>
<th>Comedy Show</th>
<th>News</th>
</tr>
<tr>
<th>7PM – 8PM</th>
<th>Sports</th>
<th>Current Affairs</th>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment