Menu
How could I create a table without the <table> tag? So it should look exactly like a regular table but without using the common table tags.
787
HyperText Markup Language (HTML) is the standard markup language used to create web pages. HTML allows table creation using the <table> tag. However, tables can also be created in HTML without using <table> tag with the help of Cascading Style Sheet (CSS).
Yes, you need to close those tags for your HTML to validate.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.
2022 Update:
Please explore CSS flexbox and Grid for implementing table layouts. They are far more flexible than the 2015 answer. https://css-tricks.com/accessible-simple-responsive-tables/
For example: The below code can also be implemented in Flexbox like this:
.table-row {
display: flex;
max-width: fit-content;
}
.table-cell {
padding: 1em;
border: 1px solid black;
}
.table-row:nth-child(even) {
background: lightblue;
}<div class="table">
<div class="table-row">
<div class="table-cell">
First item
</div>
<div class="table-cell">
Second item
</div>
<div class="table-cell">
Third item
</div>
<div class="table-cell">
Fourth item
</div>
<div class="table-cell">
Fifth item
</div>
</div>
<div class="table-row">
<div class="table-cell">
First item
</div>
<div class="table-cell">
Second item
</div>
<div class="table-cell">
Third item
</div>
<div class="table-cell">
Fourth item
</div>
<div class="table-cell">
Fifth item
</div>
</div>
<div class="table-row">
<div class="table-cell">
First item
</div>
<div class="table-cell">
Second item
</div>
<div class="table-cell">
Third item
</div>
<div class="table-cell">
Fourth item
</div>
<div class="table-cell">
Fifth item
</div>
</div>
</div>2015 Answer:
You can make use of CSS tables which have the same function as HTML tables. Learn more about the properties here: The Anti-hero of CSS Layout - "display:table". This was introduced in CSS to avoid using table tags but not necessarily to avoid using tabular layout. They are still in need for showing up tabular data.
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 10px;
border: 1px solid black;
}
.table-row:nth-child(even) {
background: lightblue;
}<div class="table">
<div class="table-row">
<div class="table-cell">
First item
</div>
<div class="table-cell">
Second item
</div>
<div class="table-cell">
Third item
</div>
<div class="table-cell">
Fourth item
</div>
<div class="table-cell">
Fifth item
</div>
</div>
<div class="table-row">
<div class="table-cell">
First item
</div>
<div class="table-cell">
Second item
</div>
<div class="table-cell">
Third item
</div>
<div class="table-cell">
Fourth item
</div>
<div class="table-cell">
Fifth item
</div>
</div>
<div class="table-row">
<div class="table-cell">
First item
</div>
<div class="table-cell">
Second item
</div>
<div class="table-cell">
Third item
</div>
<div class="table-cell">
Fourth item
</div>
<div class="table-cell">
Fifth item
</div>
</div>
</div>You can use ul li like this.
<html>
<body>
<ul style="list-style: none outside none;">
<li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
<li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
<li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
</ul>
</body>
</html>You can create using div. And Make it easy responsive.
Use display:table for it.
.table {
display: table;
width: auto;
border: 1px solid #666666;
}
.table-row {
display: table-row;
width: auto;
clear: both;
}
.table-col {
float: left;
display: table-column;
width: 200px;
border: 1px solid #ccc;
}<div class="table">
<div class="table-row">
<div class="table-col">1</div>
<div class="table-col">2</div>
<div class="table-col">3</div>
</div>
<div class="table-row">
<div class="table-col">a</div>
<div class="table-col">b</div>
<div class="table-col">c</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
