How to create a Table in the HTML

Html Table allow web developer to create tabular data format having multiple rows and column.

Tables

Tag	Description
<table>	a table tag
<caption>	a table caption
<th>	a header cell in a table
<tr>	a row in a table
<td>	a cell in a table (column)
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table
<col>	Specifies column properties for each column within a <colgroup> element
<colgroup>	Specifies a group of one or more columns in a table for formatting

colspan and rowspan

Cells may span several rows or columns. The number of rows or columns spanned by a cell is set by the rowspan and colspan attributes for the <th> and <td> elements.

In this table definition, we specify that the cell in row four, column two should span a total of three columns, including the current column.

<table border="1" cellpaddding="5" cellspacing="5">
            <caption>Heading of table</caption>
            <tr><th>Name</th><th>Cups</th><th>Type of Coffee</th><th>Sugar</th></tr>
            <tr><td>T. Grummer</td><td>10</td><td>Espresso</td><td>No</td></tr>
            <tr><td>J. Ben</td><td></td><td>Decaf</td><td>Yes</td></tr>
            <tr><td>A. Loyda</td><td colspan="3"><em>Not available</em></td></tr>
</table>

The next example illustrates (with the help of table borders) how cell definitions that span more than one row or column affect the definition of later cells. Consider the following table definition:

<TABLE border="1">
<TR><TD>1 <TD rowspan="2">2 <TD>3
<TR><TD>4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

As cell “2” spans the first and second rows, the definition of the second row will take it into account. Thus, the second TD in row two actually defines the row’s third cell.

Output:

Note that if the TD defining cell “6” had been omitted, an extra empty cell would have been added by the user agent to complete the row.

Similarly, in the following table definition:

<TABLE border="1">
<TR><TD>1 <TD>2 <TD>3
<TR><TD colspan="2">4 <TD>6
<TR><TD>7 <TD>8 <TD>9
</TABLE>

Complete example:

<html>
    <body>
        <table border="1" cellpaddding="5" cellspacing="5">
            <CAPTION>Heading of table</CAPTION>
            <tr><th>Name</th><th>Cups</th><th>Type of Coffee</th><th>Sugar</th></tr>
            <tr><td>T. Grummer</td><td>10</td><td>Espresso</td><td>No</td></tr>
            <tr><td>J. Ben</td><td></td><td>Decaf</td><td>Yes</td></tr>
            <tr><td>A. Loyda</td><td colspan="3"><em>Not available</em></td></tr>
        </table> <br><br>

        <table border="1"  cellpaddding="5" cellspacing="5">
            <tr><td>1</td></td> <td rowspan="2">2</td> <td>3</td></tr>
            <tr><td>4</td><td>6</td></tr>
            <tr><td>7 </td><td>8</td> <td>9</td></tr>
        </table>

        <br><br>

        <table border="1"  cellpaddding="5" cellspacing="5">
            <tr><td>1 <td>2 <td>3
            <tr><td colspan="2">4 <td>6
            <tr><td>7 <td>8 <td>9
         </table>  
    </body>
</html>

Output: