HTML Table

You are Here:

HTML Table

The HTML table is a structured set of data made up of rows and columns (tabular data).

A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data.

HTML Table Tags

The following table provides a list of all tags used for creating an HTML table:

tagExplanation
<table>Specifies a table.
<tr>Specifies a row in a table.
<th>Specifies a header cell in a table.
<td>Specifies a cell in a table.
<thead>Specifies a header content in a table.
<tbody>Specifies a body content in a table.
<tfoot>Specifies a footer content in a table.
<caption>Specifies a caption to a able.
<colgroup>Specifies a group of columns within a table.
<col>Specifies a column within a table.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <table> <tr> <th>S.No</th> <th>Name</th> </tr> <tr> <td>1</td> <td>Brendan</td> </tr> <tr> <td>2</td> <td>Eich</td> </tr> </table> </body> </html>

HTML Table Row Merge Cell

Use rowspan attribute to merge two or more rows into a single row.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <table> <tr> <th>Name</th> <th>Funded</th> <th>Total Funds</th> </tr> <tr> <td>Brendan</td> <td>$500</td> <td rowspan="2">$1200</td> </tr> <tr> <td>Eich</td> <td>$700</td> </tr> </table> </body> </html>

HTML Table Column Merge Cell

Use colspan attribute to merge two or more columns into a single column.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <table> <tr> <th colspan="2">Fund List</th> </tr> <tr> <th>Name</th> <th>Funded</th> </tr> <tr> <td>Brendan</td> <td>$500</td> </tr> <tr> <td>Eich</td> <td>$700</td> </tr> </table> </body> </html>

Table with Caption

Use caption tag to add caption to an HTML table.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body> <table> <caption>Total Fund List</caption> <tr> <th>Name</th> <th>Funded</th> <th>Total Funds</th> </tr> <tr> <td>Brendan</td> <td>$500</td> <td rowspan="2">$1200</td> </tr> <tr> <td>Eich</td> <td>$700</td> </tr> </table> </body> </html>

Reminder

Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in HTML.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author