Ars Informatica
March 23, 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

Creating a cross-browser-compatible data entry grid using HTML DIV tables

July 14, 2009

Sometimes, you need a data entry grid on a web page. There are commercial solutions, sure, but these can be hard to use, they cost money, and a functional design in Internet Explorer might well fail in Firefox, Safari, or Opera, or Chrome.

Regular <TABLE> and its TR, TH and TD attributes just don't give us the design options we wanted - design should reflect your need, not be forced into some awkward structure. In Sample HTML table using DIV layouts and Cascading Style Sheets (CSS), we created a deceptively simple framework for such a data entry grid or table.

Today, we extend the visual table design to become an AJAX-compatible data entry grid, one we'll ultimately use to develop a series of interactive growth charts.

It isn't hard:

Date
Age
Weight
Length
Head Circ.

 

CSS code for the data entry grid

We've already defined, and altered slightly, the Cascading Style Sheet code for the basic table:

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

.sub_table .row0     { clear:left;
                       font:14px Arial }
.sub_table .row1     { clear:left;
                       font:12px Arial }
                       
.sub_table .header0  { float:left;
                       height:20px;
                       width:90px;
                       border:1px solid black;
                       border-bottom:3px double;
                       padding-top:2px;
                       text-indent:5px }
.sub_table .header1  { float:left;
                       height:20px;
                       width:90px;
                       border-top:1px solid black;
                       border-right:1px solid black;
                       border-bottom:3px double;
                       padding-top:2px;
                       text-indent:5px }
                       
.sub_table .cell0    { float:left;
                       height:20px;
                       width:90px;
                       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:20px;
                       width:90px;
                       border-right:1px solid black;
                       border-bottom:1px solid black;
                       padding:3px 0 1px }
                       
.sub_table input     { border:0;
                       width:80px;
                       height:18px;
                       font:12px Arial;
                       margin:1px 0 0 5px }
</style>

Also note the addition of the style declaration for the <INPUT> element, specific to this table, so as not to mess with CSS for INPUT elements elsewhere.
 

HMTL DIV table code for the data entry grid

Here's the actual HTML code. Rendered up above, if you want to try it.

Load this page into different browsers to see how it works - we list the most popular ones in our article on developing a web page testing suite for Explorer 7 and 8, Firefox 2 and 3, Google Chrome, Safari.

<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"><input ID="date0" name="date0" type="text">
            </div>
            <div class="cell1"><input ID="age0" name="age0" type="text"
            value="birth">
            </div>
            <div class="cell1"><input ID="weight0" name="weight0" type="text">
            </div>
            <div class="cell1"><input ID="length0" name="length0" type="text">
            </div>
            <div class="cell1"><input ID="circ0" name="circ0" type="text">
            </div>
      </div>
      <div class="row1">
            <div class="cell0"><input ID="date1" name="date1" type="text">
            </div>
            <div class="cell1"><input ID="age1" name="age1" type="text"
            value="birth">
            </div>
            <div class="cell1"><input ID="weight1" name="weight1" type="text">
            </div>
            <div class="cell1"><input ID="length1" name="length1" type="text">
            </div>
            <div class="cell1"><input ID="circ1" name="circ1" type="text">
            </div>
      </div>

      ... etc.

      </div>
</div>

Note that we've added both "name" and "ID" tags to the INPUT elements. We want to be able to read data from elements, run various checks on these elements, and change them programmatically where required - a virtual necessity if AJAX is to be used. Specifying both name and ID means we can access them using either.
 

Using PHP to create the data grid

This step is entirely optional, but large grids are much easier to create using PHP. It's just too easy to make a mistake when coding hundreds of cells by hand.

PHP grids can also be resized as required - to add more rows if more data has been submitted, for example. Or size it to match the contents of a database table you're writing to the grid.

In this example, $row_count defines the number of rows you wish to create, and array $columns contains the prefixes we use for the ID and name for the INPUT elements in each column:

<?php

$row_count = 7;
$columns = array('date', 'age', 'weight', 'length', 'circ');

for ($i=0; $i < $row_count; $i++) {
      $j = 1;
      echo '<div class="row1">
            <div class="cell0"><input ID="'.$columns[0].$i.'"
            name="'.$columns[0].$i.'" type="text"></div>';
while ($columns[$j]) echo '<div class="cell1"><input ID="'.$columns[$j].$i.'" name="'.$columns[$j++].$i.'" type="text"></div>'; echo '</div>'; } ?>

Of course, this only scratches the surface. How you use you data entry grid depends entirely on your needs, and how creative you feel.

Enjoy.
 

Copyright © 2017 Ars Informatica. All Rights Reserved.