Ars Informatica
April 30, 2017
Home
Health Care Informatics
Web-based MySQL/PHP Databasing
Programming
Web Development
Favourite Software
Hardware for the Frugal Fanatic
Graphic Design and Image Processing
Free Scripts and Software
About Us
Contact Us
Links
 
 

 Article Feed for this site

Sample HTML table using DIV layouts, Cascading Style Sheets (CSS)

July 11, 2009

In the article Creating complex web page tables using HTML, DIVs, and Cascading Style Sheets (CSS), we described the process of translating a specific table style into one that renders properly using HTML, regardless of the browser used.

In this follow-up, we'll take the initial, very basic table:

simple table: date and age mapped against weight, length and head circumference

and render it using a DIV table and Cascading Style Sheet:

Date
Age
Weight
Length
Head Circ.
birth

Source code for the Cascading Style Sheet definitions:

<style type="text/css"> 
.sub_table   { width:420px;
               text-align:left;
               text-indent:5px;
               margin:5px 0 }

.sub_table .row0   { clear:left;
                     font:15px Calibri, Arial }
.sub_table .row1   { clear:left;
                     font:13px Calibri, Arial }

.sub_table .header0   { float:left;
                        height:18px;
                        width:80px;
                        border:1px solid black;
                        border-bottom:3px double;
                        padding-top:2px }
.sub_table .header1   { float:left;
                        height:18px;
                        width:80px;
                        border-top:1px solid black;
                        border-right:1px solid black;
                        border-bottom:3px double;
                        padding-top:2px }
 
.sub_table .cell0   { float:left;
                      height:17px;
                      width:80px;
                      border-left:1px solid black;
                      border-right:1px solid black;
                      border-bottom:1px solid black;
                      padding:3px 0 1px }
.sub_table .cell1   { float:left;
                      height:17px;
                      width:80px;
                      border-right:1px solid black;
                      border-bottom:1px solid black;
                      padding:3px 0 1px }
</style>

And the actual HTML code for the DIV table:

<div class="sub_table">
	<div class="row0">
		<div class="header0">Date</div>
		<div class="header1">Age</div>
		<div class="header1">Weight</div>
		<div class="header1">Length</div>
		<div class="header1">Head Circ.</div>
	</div>
	<div class="row1">
		<div class="cell0"></div>
		<div class="cell1">birth</div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
	</div>
	<div class="row1">
		<div class="cell0"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
	</div>
	<div class="row1">
		<div class="cell0"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
	</div>
	<div class="row1">
		<div class="cell0"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
	</div>
	<div class="row1">
		<div class="cell0"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
	</div>
	<div class="row1">
		<div class="cell0"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
	</div>
	<div class="row1">
		<div class="cell0"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
		<div class="cell1"></div>
	</div>
</div>

Enjoy.
 

Copyright © 2017 Ars Informatica. All Rights Reserved.