html table or css?

liunx

Guest
It's considered, that tables in HTML should be used only for to display tabular data. I use a perl script which search data in text database then displays the results from the database in html template, inside a table. Script can print any HTML code that can be repeated.
Everything inside the template brackets is repeated for each record (including any HTML code), everything outside the template brackets is displayed just once (header or a menu).
One inconvenient thing is that database has empty cells(missing data), so this cause some problems, since browsers display such cells without border even if the other cells have borders. Thats not look very nice.
The example below is table with four columns and a 'header' row(real table has 10 columns)
Will there any advantages if pass to css?(for example, display table without border, with white space between cells) Will page loading faster, etc? I need example of this page converted into css.


<html>
<head>
<title> </title>
</head>
<body>
<font face="Verdana" size="2"><b>
Total number of records:</b> <<#_total>><b> Matching records:</b> <<#_matches>><br>
<br>

<table border="1" cellpadding="3" cellspacing="0" width="100%">
<tr>
<td>field 1</font></td>
<td>field 2</font></td>
<td>field 3</font></td>
<td>field 4</font></td>
</tr>

<template>
<tr>
<td><<field1>></td>
<td><<field2>></td>
<td><<field3>></td>
<td><<field4>></td>
</tr>
</template>

</table>

<b>
Total number of records:</b> <<#_total>> <b>Matching records:</b> <<#_matches>></font>
</body>
</html>If it's tabular data then use a table.
Check the empty records from the database, fill the cell with a 'space' character, then the cell will have borders.I would like try color table, without border, with white space between cells; header row -another color.Could someone help?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>color table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
table {background:#fff;}
thead {background:#9cf;}
tbody {background:#ccc;}
-->
</style>
</head>
<body>
<table border="0" cellpadding="3" cellspacing="10" summary="">
<thead>
<tr><th>head 1</th><th>head 2</th><th>head 3</th></tr>
</thead>
<tbody>
<tr><td>field 1</td><td>field 2</td><td>field 3</td></tr>
</tbody>
</table>
</body>
</html>Except that XHTML browsers are permitted to ignore anything inside of comments. You need to mark your styles as CDATA, use external styles or use HTML. The best option is to just use HTML.Oops! That what happens when you 'cut & paste'. :pHere is some problem,- in conformity to my template: there are no table header itself.
'Header' are inside this row(it displayed just once like header):

<td>field 1</font></td> - this need be one color.

The all data goes inside double brackets.

<td><<field1>></td> -this need be another color.


What is summary: summary="">?then you have to give each row a color:

<tr style="background:red;"><td>field 1</td></tr>


summary="what this table is all about"is this correct:


<html>
<head>
<title> </title>
<style type="text/css">

table {background-color::#fff;}
tbody {background-color:#ccc;}
tr,td,body {font-family: Tahoma, Arial, Verdana, sans-serif; font-size:10pt;}

</style>
</head>
<body>
<font face="Verdana" size="2"><b>
Total number of records:</b> <<#_total>><b> Matching records:</b> <<#_matches>><br>
<br>

<table border="0" cellpadding="3" cellspacing="3" width="100%">
<tr style="background:red;">

<td>field 1</font></td>
<td>field 2</font></td>
<td>field 3</font></td>
<td>field 4</font></td>
</tr>

<template>
<tr>
<td><<field1>></td>
<td><<field2>></td>
<td><<field3>></td>
<td><<field4>></td>
</tr>
</template>

</table>

<b>
Total number of records:</b> <<#_total>> <b>Matching records:</b> <<#_matches>></font>
</body>
</html>It will give the first row a red background.
 
Back
Top