Example of tables in CSS.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div class="tile-grid-row"> <div class="tile-container"> <div class="tile-small"> Tile one </div> </div> <div class="tile-container"> <div class="tile-small"> Tile two </div> </div> </div> <div class="tile-grid-row"> <div class="tile-container"> <div class="tile-small"> Tile three </div> </div> <div class="tile-container"> <div class="tile-small"> Tile four </div> </div> </div> </body> </html>
CSS:
.tile-grid-row { display: table; width: 444px; } .tile-container { display: table-cell; } .tile-small { width: 221px; }
In HTML notice line: <div class="tile-grid-row">, then notice how I defined CSS class:
.tile-grid-row {
display: table;
After that in CSS notice line: display: table-cell;
display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TRs and TDs.
Example download from here.
---
Better and simple example of table with borders.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/index.css"> </head> <body> <div class="tile-table"> <div class="tile-row"> <div class="tile-cell"> <div class="description-text"> Tile one </div> </div> <div class="tile-cell"> <div class="description-text"> Tile two </div> </div> </div> <div class="tile-row"> <div class="tile-cell"> <div class="description-text"> Tile three </div> </div> <div class="tile-cell"> <div class="description-text"> Tile four </div> </div> </div> </div> </body> </html>
CSS:
.tile-table { display: table; width: 100%; border-collapse: collapse; } .tile-row { display: table-row; border: 1px solid #000; } .tile-cell { display: table-cell; width: 50%; border: 1px solid #000; } .description-text { position: relative; top: 1%; }
Here notice first border-collapse: collapse, and then border in cell and row. Example download from here.