HTML Tags
HTML <table> Tag
The
<table>tag in HTML defines a table - a structured arrangement of data in rows and columns.
It serves as the container for all related elements like<tr>,<th>,<td>,<thead>,<tbody>, and<tfoot>
Syntax
html
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Attributes
| Attribute | Description |
|---|---|
| border | Specifies the border width around table cells (deprecated, use CSS). |
| cellpadding | Space between cell content and its border (deprecated, use CSS). |
| cellspacing | Space between cells (deprecated, use CSS). |
| width | Sets the table’s width (deprecated, use CSS). |
| summary | Provides a summary of the table’s purpose (deprecated, use <caption> instead). |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Tag Example</title>
<style>
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #555;
padding: 10px;
text-align: center;
}
th {
background-color: #29AB87;
color: white;
}
</style>
</head>
<body>
<h2>HTML Table Example</h2>
<table>
<tr>
<th>Language</th>
<th>Type</th>
<th>Year Introduced</th>
</tr>
<tr>
<td>HTML</td>
<td>Markup</td>
<td>1993</td>
</tr>
<tr>
<td>CSS</td>
<td>Style Sheet</td>
<td>1996</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Programming</td>
<td>1995</td>
</tr>
</table>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browsers fully support the <table> element.
Notes
- The
<table>element is the parent container for all table-related elements. - Use
<thead>,<tbody>, and<tfoot>for semantic grouping. - CSS should be preferred for styling (borders, spacing, alignment).
- For accessibility, include a
<caption>or usescopeattributes in header cells.
Conclusion
The <table> tag is the backbone of tabular data in HTML.
When combined with semantic child elements and proper CSS, it allows for both well-structured and visually appealing data presentation.