Examples of Pure CSS Tables which replace certain types of HTML Tables
Tableless CSS – Example 1
This is Cell Nr. 1.1.
row=1, column=1
This is Cell Nr. 1.2.
row=1, column=2
This is Cell Nr. 1.3.
row=1, column=3
This is Cell Nr. 2.1.
row=2, column=1
This is Cell Nr. 2.2.
row=2, column=2
This is Cell Nr. 2.3.
row=2, column=3
CSS Code and HTML for Example 1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<style type="text/css"> .table{ display: table; padding: 5px; margin: 5px; border: solid 2px #0000FF; } .row{ display: table-row; vertical-align: top; padding-bottom: 10px; border: solid 1px #00FF00; border-left: 0px; } .cell{ display: table-cell; vertical-align: top; padding-left: 10px; width: 300px; text-align: left; margin: 1px; border: solid 1px #FF0000; } .td { width: 100px; font-style:italic; } </style> <div class="table"> <div class="row"> <span class="cell"> This is Cell Nr. 1.1.<br> row=1, column=1<br> </span> <span class="cell"> This is Cell Nr. 1.2.<br> row=1, column=2<br> </span> <span class="cell"> This is Cell Nr. 1.3.<br> row=1, column=3<br> </span> </div> <div class="row"> <span class="cell"> This is Cell Nr. 2.1.<br> row=2, column=1<br> </span> <span class="cell"> This is Cell Nr. 2.2.<br> row=2, column=2<br> </span> <span class="cell"> This is Cell Nr. 2.3.<br> row=2, column=3<br> </span> <!-- cell --> </div> <!-- row --> </div><!-- table --> |
Tableless CSS – Example 2
table.row1
This is Cell Nr. 1.1.
row=1, column=1
This is Cell Nr. 1.2.
row=1, column=2
This is Cell Nr. 1.3.
row=1, column=3
This is Cell Nr. 2.1.
row=2, column=1
This is Cell Nr. 2.2.
row=2, column=2
This is Cell Nr. 2.3.
row=2, column=3
This is Cell Nr. 1.1.
row=1, column=1
This is Cell Nr. 1.2.
row=1, column=2
This is Cell Nr. 1.3.
row=1, column=3
table.row2
This is Cell Nr. 2.1.
row=2, column=1
This is Cell Nr. 2.2.
row=2, column=2
This is Cell Nr. 2.3.
row=2, column=3
CSS Code and HTML for Example 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<style type="text/css"> .table{ display: table; padding: 5px; margin: 5px; border: solid 2px #0000FF; } .row{ display: table-row; vertical-align: top; padding-bottom: 10px; border: solid 1px #00FF00; border-left: 0px; } .cell{ display: table-cell; vertical-align: top; padding-left: 10px; width: 300px; text-align: left; margin: 1px; border: solid 1px #FF0000; } .td { width: 100px; font-style:italic; } </style> <div class="table"> table.row1 <div class="row"> <span class="cell"> This is Cell Nr. 1.1.<br> row=1, column=1<br> </span> <span class="cell"> This is Cell Nr. 1.2.<br> row=1, column=2<br> </span> <span class="cell"> This is Cell Nr. 1.3.<br> row=1, column=3<br> </span> </div> table.row2 <div class="row"> <span class="cell"> This is Cell Nr. 2.1.<br> row=2, column=1<br> </span> <span class="cell"> This is Cell Nr. 2.2.<br> row=2, column=2<br> </span> <span class="cell"> This is Cell Nr. 2.3.<br> row=2, column=3<br> </span> <!-- cell --> </div> <!-- row --> </div><!-- table --> |
Tableless CSS – Example 3
This is Cell Nr. 1.1.
row=1
column=1
width=td1=100px
This is Cell Nr. 1.2.
row=1
column=2
width=td2=100px
This is Cell Nr. 1.3.
row=1
column=3
width=300px
This is Cell Nr. 1.4.
row=1
column=4
width=300px
This is Cell Nr. 2.1.
row=2
column=1
width=same as 1.1 above
This is Cell Nr. 2.2.
row=2
column=2
width=same as 1.2 above
This is Cell Nr. 2.3.
row=2
column=3
width=same as 1.3 above
This is Cell Nr. 2.4.
row=2
column=4
width=same as 1.4 above
CSS Code and HTML for Example 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<style type="text/css"> .table{ display: table; padding: 5px; margin: 5px; border: solid 2px #0000FF; } .row{ display: table-row; vertical-align: top; padding-bottom: 10px; border: solid 1px #00FF00; border-left: 0px; } .cell{ display: table-cell; vertical-align: top; padding-left: 10px; width: 300px; text-align: left; margin: 1px; border: solid 1px #FF0000; } .td { width: 100px; font-style:italic; } </style> <div class="table"> <div class="row"> <span class="cell td"> This is Cell Nr. 1.1.<br> row=1<br> column=1<br> width=td1=100px<br> </span> <span class="cell td"> This is Cell Nr. 1.2.<br> row=1<br> column=2<br> width=td2=100px<br> </span> <span class="cell"> This is Cell Nr. 1.3.<br> row=1<br> column=3<br> width=300px<br> </span> <span class="cell"> This is Cell Nr. 1.4.<br> row=1<br> column=4<br> width=300px<br> </span> </div> <div class="row"> <span class="cell"> This is Cell Nr. 2.1.<br> row=2<br> column=1<br> width=same as 1.1 above<br> </span> <span class="cell"> This is Cell Nr. 2.2.<br> row=2<br> column=2<br> width=same as 1.2 above<br> </span> <span class="cell"> This is Cell Nr. 2.3.<br> row=2<br> column=3<br> width=same as 1.3 above<br> </span> <span class="cell"> This is Cell Nr. 2.4.<br> row=2<br> column=4<br> width=same as 1.4 above<br> </span> </div> <!-- row --> </div><!-- table --> |