New course! Every coder should learn Generative AI!
Try a free lesson0
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
[SOLVED] Ballpark Challenge
1 Votes
HELP. UNFAIR STREAK LOSS
2 Votes
Who will
0 Votes
There is an error.
0 Votes