Menu
Yes you can put table tag inside div tag .
Creating Web Layout using Div Tag The div tag is a container tag inside div tag we can put more than one HTML element and can group together and can apply CSS for them.
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).
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
}
.div-table-col {
float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;
}
Runnable snippet:
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
}
.div-table-col {
float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;
}<body>
<form id="form1">
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col" align="center">Customer ID</div>
<div class="div-table-col">Customer Name</div>
<div class="div-table-col">Customer Address</div>
</div>
<div class="div-table-row">
<div class="div-table-col">001</div>
<div class="div-table-col">002</div>
<div class="div-table-col">003</div>
</div>
<div class="div-table-row">
<div class="div-table-col">xxx</div>
<div class="div-table-col">yyy</div>
<div class="div-table-col">www</div>
</div>
<div class="div-table-row">
<div class="div-table-col">ttt</div>
<div class="div-table-col">uuu</div>
<div class="div-table-col">Mkkk</div>
</div>
</div>
</form>
</body>divs shouldn't be used for tabular data. That is just as wrong as using tables for layout.
Use a <table>. Its easy, semantically correct, and you'll be done in 5 minutes.
This is an old thread, but I thought I should post my solution. I faced the same problem recently and the way I solved it is by following a three-step approach as outlined below which is very simple without any complex CSS.
(NOTE : Of course, for modern browsers, using the values of table or table-row or table-cell for display CSS attribute would solve the problem. But the approach I used will work equally well in modern and older browsers since it does not use these values for display CSS attribute.)
3-STEP SIMPLE APPROACH
For table with divs only so you get cells and rows just like in a table element use the following approach.
.table class).row class).cell class).table {display:block; }
.row { display:block;}
.cell {display:inline-block;} <h2>Table below using table element</h2>
<table cellspacing="0" >
<tr>
<td>Mike</td>
<td>36 years</td>
<td>Architect</td>
</tr>
<tr>
<td>Sunil</td>
<td>45 years</td>
<td>Vice President aas</td>
</tr>
<tr>
<td>Jason</td>
<td>27 years</td>
<td>Junior Developer</td>
</tr>
</table>
<h2>Table below is using Divs only</h2>
<div class="table">
<div class="row">
<div class="cell">
Mike
</div>
<div class="cell">
36 years
</div>
<div class="cell">
Architect
</div>
</div>
<div class="row">
<div class="cell">
Sunil
</div>
<div class="cell">
45 years
</div>
<div class="cell">
Vice President
</div>
</div>
<div class="row">
<div class="cell">
Jason
</div>
<div class="cell">
27 years
</div>
<div class="cell">
Junior Developer
</div>
</div>
</div>UPDATE 1
To get around the effect of same width not being maintained across all cells of a column as mentioned by thatslch in a comment, one could adopt either of the two approaches below.
Specify a width for cell class
cell {display:inline-block; width:340px;}
Use CSS of modern browsers as below.
.table {display:table; } .row { display:table-row;} .cell {display:table-cell;}
If there is anything in <table> you don't like, maybe you could use reset file?
or
if you need this for layout of the page check out the cssplay layout examples for designing websites without tables.
I don't see any answer considering Grid-Css. I think it is a very elegant approach: grid-css even supports row span and and column spans. Here you can find a very good article:
https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611
Use the correct doc type; it will solve the problem. Add the below line to the top of your HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
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