Create Table Using HTML


HTML Table

Syntax :

<table>
<tr>
<td or th> t e x t </td or /th>
<td or th> t e x t </td or /th>
</tr>
<tr>
<td or th> t e x t </td or /th>
<td or th> t e x t </td or /th>
</tr>
</table>


Syntax Explained

Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.

An HTML Table Attribute


<table border="1" style="width:100%">
<tr>
<td> t e x t </td>
<td> t e x t </td>
<td> t e x t </td>
</tr>
</table>


Table Cells that Span Many Columns

To make a cell span more than one column, use the colspan attribute:
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Nicky Arman</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>


Table Cells that Span Many Rows

To make a cell span more than one row, use the rowspan attribute:
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>

An HTML Table With a Caption

To add a caption to a table, use the <caption> tag:

<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>


Example html code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<p align="center"><b>Class Participation Report</b></p>
<table border="1" style="width:100%">
<tr>
<th>Name</th>
<th>Obedience</th>
<th>Polite</th>
<th>Organized</th>
<th>Show Responsibility</th>
<th>Show Respect to Others</th>
<th>Show Care to Others</th>
</tr>
<tr align="center">
<td>Rudi</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>60</td>
<td>50</td>
<td>90</td>
</tr>
<tr align="center">
<td>yudit</td>
<td>60</td>
<td>50</td>
<td>70</td>
<td>60</td>
<td>50</td>
<td>30</td>
</tr>
</table>
</body>
</html>


Figure of  Table HTML Example :