0
How to make a three colums table using div tag ?
10 Answers
+ 9
<!DOCTYPE html>
<html>
<head>
<title>Div Table</title>
<style>
div {
position:absolute;
width:10%;
height:10%;
background:yellow;
}
.r1 {
top:0%;
}
.r2 {
top:15%;
}
.r3 {
top:30%;
}
.c1 {
left:0%;
}
.c2 {
left:15%;
}
.c3 {
left:30%;
}
</style>
</head>
<body>
<div class="r1 c1">1</div>
<div class="r1 c2">2</div>
<div class="r1 c3">3</div>
<div class="r2 c1">4</div>
<div class="r2 c2">5</div>
<div class="r2 c3">6</div>
<div class="r3 c1">7</div>
<div class="r3 c2">8</div>
<div class="r3 c3">9</div>
</body>
</html>
+ 8
Why <div> when you can use <table>?? (you'll have to make div positions "absolute" or "fixed" and change their "top" and "left" attributes with css)
+ 8
âŠYes, My code "ChessBoard" is an example of div tableâŠ
+ 8
If you tell me exactly how it must look likeâŠ
+ 3
@ValentinHacker said:
"Why <div> when you can use <table>?? (you'll have to make div positions "absolute" or "fixed" and change their "top" and "left" attributes with css)"
Why? Because to be semanticaly valid, regards of W3C recommendations, and accessory be better ranking by google ^^
<table> elemet ( and derivated ) have strong semantic sense. It has always been strongly discouraged, but difficulties to integrate from more to more layouts in earlier versions of Html have pushed webmasters to use and abuse it.
But today, with evolutons of Css, we can avantageously attribute the table/row/cell behaviours, to any tag ( means semantically more adapted ) by using the 'display' attribute with values "table", "table-row", "table-cell" ( as mostly used are "block" and "inline", a little less "none" -- for hide an element without reserving its place in the layout, different from "visibility:none" -- or "inline-block" )...
So, the rule is simple:
For "real" table, meaning data-list to present, use <table> tag element...
For layout and other purposes than an visually grid object, use <div> or whatever tag semanticly adapted to the use...
The most needed behaviour of table/cell I personnaly encountered is the capacity to vertical align the content ( which was hard to obtain, until Flex-box -- but Flex stand fairly opaque to me :P ), so we can now use this facilities without poluate the semantic structure of the html page by table/cell colonization ^^
+ 1
I heard from a guy that it's possible with div tag also, is it possible?
+ 1
it should be the same as 3Ă3 table
+ 1
oh thanks a lot
+ 1
wow the answer is so long........ 0.0
0
I'm not gettingđ. can u please write the complete code?
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help please?
4 Votes
Ejercicio Pytho
0 Votes
Online voting system
2 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
Game development
0 Votes