0

How to make a three colums table using div tag ?

9th Jan 2017, 3:31 PM
Ahmad Farid Haqiar
Ahmad Farid Haqiar - avatar
10 ответов
+ 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>
9th Jan 2017, 3:53 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 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)
9th Jan 2017, 3:33 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 8
…Yes, My code "ChessBoard" is an example of div table…
9th Jan 2017, 3:38 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 8
If you tell me exactly how it must look like…
9th Jan 2017, 3:44 PM
Valen.H. ~
Valen.H. ~ - avatar
+ 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 ^^
9th Jan 2017, 6:15 PM
visph
visph - avatar
+ 1
I heard from a guy that it's possible with div tag also, is it possible?
9th Jan 2017, 3:36 PM
Ahmad Farid Haqiar
Ahmad Farid Haqiar - avatar
+ 1
it should be the same as 3×3 table
9th Jan 2017, 3:45 PM
Ahmad Farid Haqiar
Ahmad Farid Haqiar - avatar
+ 1
oh thanks a lot
9th Jan 2017, 3:47 PM
Ahmad Farid Haqiar
Ahmad Farid Haqiar - avatar
+ 1
wow the answer is so long........ 0.0
9th Jan 2017, 11:38 PM
Leon lit
Leon lit - avatar
0
I'm not getting😒. can u please write the complete code?
9th Jan 2017, 3:43 PM
Ahmad Farid Haqiar
Ahmad Farid Haqiar - avatar