– Organizing Data in Rows and Columns on Your Webpage
When it comes to displaying structured data — like schedules, pricing plans, or comparison charts — HTML tables are the perfect tool. Tables allow you to organize information neatly in rows and columns, making it easy for visitors to read and understand.
In this blog, we’ll cover:
- What HTML tables are
- The basic structure of a table
- Common tags used to build tables
- Simple examples to get you started
What is an HTML Table?
An HTML table is a way to display data in a grid format composed of rows and columns. Unlike other layout tools, tables are specifically designed for tabular data.
Basic Structure of an HTML Table
Here are the main tags involved in creating a table:
| Tag | Purpose |
| <table> | Defines the table container |
| <tr> | Defines a table row |
| <th> | Defines a header cell (bold & centered by default) |
| <td> | Defines a standard data cell |
✅ Simple Example
html
CopyEdit
<table border=”1″>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Mary</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>
What this does:
- Creates a table with a border
- The first row contains headers (Name, Age, City)
- The next two rows contain data
Explanation of Tags
- <table>: Wraps all table content
- <tr>: Groups cells into a row
- <th>: Defines column headers, usually bold and centered
- <td>: Contains actual data for each cell
Styling Tables
By default, tables look simple, but CSS can be used to improve their appearance:
html
CopyEdit
<style>
table {
width: 50%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #333;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
Useful Attributes for Tables
| Attribute | Description |
| border | Adds a border around cells (e.g., border=”1″) |
| cellpadding | Space inside cells |
| cellspacing | Space between cells |
| colspan | Makes a cell span multiple columns |
| rowspan | Makes a cell span multiple rows |
Conclusion
HTML tables provide a clear, organized way to display tabular data on websites. Learning how to build and style tables is a fundamental skill for web developers and designers alike.
“Data in tables tells a story — structure it well, and your audience will understand it better.”
