HTML Tables
HTML Table Tags and Formatting
HTML tables provide a straightforward way to display data in rows and columns. By mastering html table tags and table attributes in html, you can create both simple and advanced layouts. Now, let’s cover from a basic html table code example to responsive designs and even dynamic javascript tables. A sample HTML Table is provided below:
Understanding HTML Table Attributes
First, you should know how attributes like border, cellpadding, and cellspacing can enhance your html data tables. Furthermore, you can also apply inline styles using html table style and html table design to improve readability without external CSS. Now, let’s go through the example below to learn how HTML Tables work.
1. Basic HTML Tables Example
To begin, Let’s start with the simplest html table code using native html table tags. After clicking on “Test my Code” button you should notice the double borders around the table and its cells.
<!-- Example: Basic HTML Table -->
</p> Example of a HTML Table with solid border. </p>
<table border = "1px">
<tr> <th>Name</th> <th>Age</th> <th>City</th>
</tr>
<tr> <td>Alice</td> <td>24</td> <td>London</td>
</tr>
<tr> <td>Bob</td> <td>30</td> <td>New York</td>
</tr>
</table> <br> <br>
<style>
.table2,
.table2 td,
.table2 th {
border: 1px dotted red;
}
</style>
</p> Example of a HTML Table with dotted border. </p>
<table class ="table2">
<tr> <th>Name</th> <th>Age</th> <th>City</th>
</tr>
<tr> <td>Alice</td> <td>24</td> <td>London</td>
</tr>
<tr> <td>Bob</td> <td>30</td> <td>New York</td>
</tr>
</table>
2. Border Table HTML Example
Additionally, by using the border-collapse attribute you get a classic HTML Table with single color Border as shown in the example below:
<!-- Example: Table with Border -->
<p> If you want to use single border inplace of double border you can use "border-collapse: collapse;" in your style statement. </p>
<table cellspacing="0" cellpadding="8" style="border: 2px solid blue; border-collapse: collapse;" >
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>$899</td>
</tr>
<tr>
<td>Tablet</td>
<td>$499</td>
</tr>
</table>
3. Responsive HTML Table Example
In the example below we will learn how to make responsive HTML Table. These responsive tables automatically adapts to any screen size, ensuring better readability on both desktop and mobile devices. On small viewports it allows smooth horizontal scrolling, and on very small screens the cells stack vertically with clear labels for easy data access.
<!-- Example: Responsive 4×4 Table -->
<style>
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
width: 100%;
min-width: 600px;
border-collapse: collapse;
}
.table-responsive th,
.table-responsive td {
padding: 8px;
border: 1px solid #007acc;
text-align: left;
}
.table-responsive th {
background: #007acc;
color: #fff;
}
/* Stack into blocks on very small screens */
@media (max-width: 250px) {
.table-responsive table,
.table-responsive thead,
.table-responsive tbody,
.table-responsive th,
.table-responsive td,
.table-responsive tr {
display: block;
}
.table-responsive thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.table-responsive tr {
margin: 0 0 1rem 0;
}
.table-responsive td {
position: relative;
padding-left: 50%;
border: none;
border-bottom: 1px solid #ddd;
}
.table-responsive td:before {
content: attr(data-label);
position: absolute;
left: 8px;
top: 8px;
font-weight: bold;
white-space: nowrap;
}
}
</style>
<p> Below is the example of a responsive HTML Table that scales with the display size. </p>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">Alice</td>
<td data-label="Age">28</td>
<td data-label="City">New York</td>
<td data-label="Occupation">Designer</td>
</tr>
<tr>
<td data-label="Name">Bob</td>
<td data-label="Age">34</td>
<td data-label="City">London</td>
<td data-label="Occupation">Developer</td>
</tr>
<tr>
<td data-label="Name">Carol</td>
<td data-label="Age">22</td>
<td data-label="City">Tokyo</td>
<td data-label="Occupation">Photographer</td>
</tr>
<tr>
<td data-label="Name">David</td>
<td data-label="Age">45</td>
<td data-label="City">Sydney</td>
<td data-label="Occupation">Manager</td>
</tr>
</tbody>
</table>
</div>
4. Sortable Table with JavaScript
You can also enhance your html data tables with a JavaScript based sorter that toggles ascending and descending order when clicking on any header. Such tables are very useful in sorting and evaluating the table data.
<!-- Example: Fully Sortable Table -->
<table id="sortableTable" border="1" style="border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th onclick="sortTable(0)" style="cursor: pointer; color: blue;">Name ⬍</th>
<th onclick="sortTable(1)" style="cursor: pointer; color: blue;">Score ⬍</th>
<th onclick="sortTable(2)" style="cursor: pointer; color: blue;">Age ⬍</th>
</tr>
</thead>
<tbody>
<tr><td>Alice</td><td>85</td><td>24</td></tr>
<tr><td>Bob</td><td>92</td><td>30</td></tr>
<tr><td>Carol</td><td>78</td><td>27</td></tr>
<tr><td>Dave</td><td>88</td><td>22</td></tr>
</tbody>
</table>
<p> You can click on the headings (blue text) to short table data.</p>
<script>
let sortDirections = [true, true, true];
function sortTable(colIndex) {
const table = document.getElementById('sortableTable');
const tbody = table.tBodies[0];
const rows = Array.from(tbody.rows);
const asc = sortDirections[colIndex];
rows.sort((a, b) => {
const aText = a.cells[colIndex].innerText;
const bText = b.cells[colIndex].innerText;
return (!isNaN(aText) && !isNaN(bText))
? (asc ? aText - bText : bText - aText)
: (asc ? aText.localeCompare(bText) : bText.localeCompare(aText));
});
rows.forEach(row => tbody.appendChild(row));
sortDirections[colIndex] = !asc;
}
</script>
5. Styled HTML Table Design and Formatting
In place of the regular CSS you can also use inline styling to enhances html table design and html table formatting directly within html table examples. This method is generally use for small tables.
<!-- Example: Styled HTML Table -->
<table style="width:100%; border-collapse: collapse;" border="1">
<tr style="background-color: #f2f2f2;">
<th style="padding: 10px; text-align: left;">Country</th>
<th style="padding: 10px; text-align: left;">Capital</th>
</tr>
<tr>
<td style="padding: 10px;">France</td>
<td style="padding: 10px;">Paris</td>
</tr>
<tr style="background-color: #fafafa;">
<td style="padding: 10px;">Japan</td>
<td style="padding: 10px;">Tokyo</td>
</tr>
</table>
<p> The above table highlights the use of inline style for less complicated tables. </p>
6. Div Table – Creating HTML Table Using Divs
Instead of using the traditional <table> element, you can also create a table-like layout using nested <div> elements. This approach provide more flexibility in table design. You can style <div> with CSS, as shown in the example below:
<!-- Example: Div Table -->
<style>
.div-table {
display: table;
width: 100%;
border-collapse: collapse;
}
.div-table-row {
display: table-row;
}
.div-table-header,
.div-table-cell {
display: table-cell;
padding: 10px;
border: 1px solid #007acc;
text-align: left;
}
.div-table-header {
background-color: #007acc;
color: white;
font-weight: bold;
}
</style>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-header">Name</div>
<div class="div-table-header">Age</div>
<div class="div-table-header">City</div>
<div class="div-table-header">Occupation</div>
</div>
<div class="div-table-row">
<div class="div-table-cell">Alice</div>
<div class="div-table-cell">28</div>
<div class="div-table-cell">New York</div>
<div class="div-table-cell">Designer</div>
</div>
<div class="div-table-row">
<div class="div-table-cell">Bob</div>
<div class="div-table-cell">34</div>
<div class="div-table-cell">London</div>
<div class="div-table-cell">Developer</div>
</div>
<div class="div-table-row">
<div class="div-table-cell">Carol</div>
<div class="div-table-cell">22</div>
<div class="div-table-cell">Tokyo</div>
<div class="div-table-cell">Photographer</div>
</div>
</div>
<p> The above HTML Table is generated using Div tags only. Please note no table tags are used. </p>
List of different Attributes for HTML Tables
The list below summarizes key HTML table elements, their purpose, usage requirements, and common attributes. It’s a quick reference for understanding HTML table tags and improving HTML table formatting.
<table><table>…</table><caption><caption>Sales Q1 2025</caption><colgroup><col> elements for collective styling.
<colgroup>
<col span="2"></col>
<col style="background:#f2f2f2;"></col>
</colgroup>
<col><colgroup>.<col span="3" /><thead><th>) separate from body.
<thead>
<tr><th>Name</th><th>Age</th></tr>
</thead>
<tfoot>
<tfoot>
<tr><td>Total</td><td>…</td></tr>
</tfoot>
<tbody>
<tbody>
<tr><td>Alice</td><td>30</td></tr>
</tbody>
<tr><tr>…</tr><th><th scope="col">Header</th><td><td>Data</td><td colspan="2">Merged</td><td rowspan="3">Merged</td><th scope="row">Name</th>id.
<th id="h1">Item</th>
<td headers="h1">Book</td>
Web Resources on HTML Table
1. California State University, Northridge – Data vs. Layout Tables
2. Colorado State University – HTML Table Tags Reference
3. East Tennessee State University – HTML Table Basics
4. University of Houston – Working with HTML Tables in CMS
5. Thomas Jefferson High School for Science & Technology – Formatting with Tables
6. Denison University – HTML Table Examples Guide
7. MDN – HTML Table Basics (Learn Web Development)
8. MDN – The Table Element
Questions and Answers related to HTML Tables
HTML tables are used to organize data into rows and columns, facilitating structured information display. To create a table, use the <table> tag, with <tr> for table rows, <th> for header cells, and <td> for data cells. Here’s a basic example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>This structure creates a table with one header row and one data row.
To build a table with 3 rows and 4 columns, structure your HTML as follows:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 6</td>
<td>Data 7</td>
<td>Data 8</td>
</tr>
</table>This code creates a table with a header row and two data rows, each containing four columns.
Responsive tables adjust to different screen sizes. Wrap the <table> in a <div> with overflow-x: auto; to enable horizontal scrolling on small screens:
<div style="overflow-x:auto;">
<table>
<!-- Table content -->
</table>
</div>Common table attributes include border, cellpadding, and cellspacing. However, it’s recommended to use CSS for styling instead of these deprecated attributes.
To style table borders using CSS, apply the border property to the <table>, <th>, and <td> elements:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}The border-collapse: collapse; property ensures that adjacent borders are merged into a single border, providing a cleaner look.
Best practices for HTML tables include:
- Use
<th>elements for headers to improve accessibility. - Apply the
scopeattribute in<th>to define whether it applies to a row, column, or group. - Utilize CSS for styling instead of deprecated HTML attributes.
- Ensure tables are responsive for better usability on various devices.
- Keep the table structure simple and avoid unnecessary nesting.
Using <div> elements to create table-like structures involves applying CSS properties such as display: table;, display: table-row;, and display: table-cell; to <div>s to mimic table behavior. However, this approach requires manually setting widths for alignment and lacks some inherent functionalities of standard <table> elements, such as automatic column width calculation. Standard HTML tables are more straightforward for displaying tabular data and are better supported across different browsers and devices. Therefore, for data presentation, using standard HTML tables is generally recommended.
To quickly generate an HTML table, you can use online tools like TablesGenerator.com. These tools allow you to input your data, customize table properties such as the number of rows and columns, and then generate the corresponding HTML code. You can then copy and paste this code into your website’s source.
HTML data tables are specifically designed to present structured data with logical relationships between rows and columns. They use semantic elements like <th> for headers and <td> for data cells, aiding in accessibility and clarity. Standard HTML table design refers to the basic structure of tables without necessarily emphasizing semantic elements or accessibility features. Using proper semantics in data tables enhances user experience, especially for assistive technologies.
Creating tables in HTML emails requires using inline CSS and avoiding external stylesheets, as many email clients do not support them. Use the <table> element with attributes like cellpadding, cellspacing, and border to control spacing and borders. Ensure your tables are responsive by setting the container <div> to a fixed width and nested tables to 100% width. Always test your emails across different clients to ensure consistent rendering.
To create responsive HTML tables, follow these steps:
- Structure your table using
<table>,<tr>,<th>, and<td>elements. - Wrap the table in a
<div>withoverflow-x: auto;to enable horizontal scrolling on small screens. :contentReference[oaicite:4]{index=4} - Use CSS media queries to adjust table styles for different screen sizes.
- Avoid using deprecated attributes like
border,cellpadding, andcellspacing; instead, use CSS for styling. - Test your table across various devices to ensure responsiveness and accessibility.
You can Edit the codes Here
