Tables are an essential part of structuring and presenting tabular data on web pages. Whether you’re building a data dashboard, showcasing statistics, or displaying SQL data, HTML tables offer a flexible and powerful solution. In this article, we’ll explore how to create a table in HTML, including real-world examples and advanced techniques like nested tables, cell merging, table alignment, and background color customization.
What is an HTML Table?
An HTML table is a structured set of rows and columns used to display data in a grid format. HTML tables use the <table> element along with <tr> (table row), <th> (table header), and <td> (table data) tags.
How to Create a Table in HTML
Here’s a basic example showing how to create the table in HTML:
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Pen</td>
<td>$1</td>
</tr>
<tr>
<td>Notebook</td>
<td>$3</td>
</tr>
</table>This example uses the border attribute, which is a quick way to add borders in table HTML. However, modern CSS is recommended for better control.
Adding Background Color in HTML Table
You can enhance the appearance of your table using background color in table HTML:
<table border="1">
<tr style="background-color: #f2f2f2;">
<th>Course</th>
<th>Duration</th>
</tr>
<tr style="background-color: #e0ffe0;">
<td>HTML Basics</td>
<td>2 weeks</td>
</tr>
</table>You can also set the html table background color using CSS classes for more reusability. This is often referred to as html background table color.
HTML Table Column Size
To control column width, use the width attribute or CSS:
<table border="1">
<tr>
<th style="width: 200px;">Name</th>
<th style="width: 100px;">Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>Adjusting html table column size helps when you’re displaying lots of data in fixed-size layouts.
Set Font and Padding in HTML Table
To set the font for an entire HTML table and add spacing, use CSS:
<style>
table {
font-family: Arial, sans-serif;
padding: 10px;
border-collapse: collapse;
}
td, th {
padding: 8px;
}
</style>This also improves HTML padding in table for readability.
HTML Table Merge Cells
You can merge table cells in HTML using the colspan and rowspan attributes.
<table border="1">
<tr>
<th colspan="2">User Info</th>
</tr>
<tr>
<td>Name</td>
<td>Sarah</td>
</tr>
<tr>
<td rowspan="2">Contact</td>
<td>Email: sarah@example.com</td>
</tr>
<tr>
<td>Phone: 123-456-7890</td>
</tr>
</table>This technique is known as merging cells in HTML table or merge HTML table cells, useful for creating complex layouts.
HTML Table Inside Table (Nested Tables)
Using table inside table in HTML or nested table in HTML is helpful when you need hierarchical data:
<table border="1">
<tr>
<td>Main Data</td>
<td>
<table border="1">
<tr>
<td>Subdata 1</td>
</tr>
<tr>
<td>Subdata 2</td>
</tr>
</table>
</td>
</tr>
</table>Using an HTML table in table layout must be handled carefully to maintain alignment and readability.
How to Center Align a Table in HTML
Use CSS to center align a table in HTML:
<table style="margin: auto;" border="1">
<tr>
<th>Item</th>
<th>Qty</th>
</tr>
<tr>
<td>Apple</td>
<td>10</td>
</tr>
</table>If you’re wondering how to align HTML table to center, this method ensures compatibility across modern browsers.
How to Display a SQL Table in HTML
To display a SQL table in HTML, use a server-side language like PHP, Node.js, or Python (Flask, Django). Example using PHP:
<?php
$conn = new mysqli("localhost", "root", "", "database");
$result = $conn->query("SELECT * FROM users");
echo "<table border='1'>";
while($row = $result->fetch_assoc()) {
echo "<tr><td>".$row['name']."</td><td>".$row['email']."</td></tr>";
}
echo "</table>";
?>This renders database content dynamically in an HTML table.
Sorting in HTML Table
Basic sorting can be done with JavaScript:
<script>
function sortTable() {
let table = document.getElementById("myTable");
let rows = Array.from(table.rows).slice(1);
rows.sort((a, b) => a.cells[0].innerText.localeCompare(b.cells[0].innerText));
rows.forEach(row => table.appendChild(row));
}
</script>
<table id="myTable" border="1">
<tr><th onclick="sortTable()">Name</th></tr>
<tr><td>John</td></tr>
<tr><td>Alice</td></tr>
</table>This demonstrates sorting in HTML table using JavaScript on a basic level.
Export HTML Table to Excel
You can convert HTML table to Excel using JavaScript:
<button onclick="exportTable()">Export</button>
<table id="tableData" border="1">
<tr><th>Name</th><th>Score</th></tr>
<tr><td>Tom</td><td>90</td></tr>
</table>
<script>
function exportTable() {
let table = document.getElementById("tableData").outerHTML;
let blob = new Blob([table], { type: "application/vnd.ms-excel" });
let url = URL.createObjectURL(blob);
let a = document.createElement("a");
a.href = url;
a.download = "table.xls";
a.click();
}
</script>This is a simple html table to excel exporter.
Convert Excel to HTML Table
You can use tools like SheetJS to convert Excel files into HTML tables, or export Excel data manually and paste it into an HTML table. This is helpful for excel to html table conversions during data presentation.
HTML Table Without Lines
To create an HTML table with no lines, remove borders:
<table style="border: none;">
<tr>
<td style="border: none;">Data 1</td>
<td style="border: none;">Data 2</td>
</tr>
</table>Or use border-collapse: collapse; border: none; in CSS for cleaner structure.
Conclusion
Now that you understand how to create a table in HTML with examples, you can build structured, styled, and even interactive tables with confidence. Whether you’re nesting tables, merging cells, styling backgrounds, or even exporting to Excel, HTML tables give you full control over layout and data display.
Frequently Asked Questions (FAQs)
How to create a table in HTML?
Use the table, tr, th, and td tags to define the structure and content.
How do you merge cells in an HTML table?
Use colspan (horizontal) and rowspan (vertical) in td or th tags.
Can I put a table inside another table in HTML?
Yes, nesting tables is possible. Just insert another table inside a td cell.
How can I export an HTML table to Excel?
Use JavaScript to convert the table’s HTML content into a downloadable Excel format.
How do I add background color to specific rows or columns?
Use the style="background-color: #color;" inline or with CSS classes for rows and cells.
Leave a Reply