html css js pretty,Pretty HTML Table with CSS

Pretty HTML Table with CSS

Without Ajax framework, but with just a JavaScript function to alternate colors, this gives HTML tables the look of that of magazine or professional website.

The demonstration is done both on a complete structure and simplified structure (see article in Table in HTML 4 and 5 for more detail). The record is exactly the same.

HTML code for a table

The caption tag is an option as the thead and tbody tags.

...three cells..

...four row of three cells each...

Note the use of

header tag in top row They may be used also on first cell of each row.

The CSS code

It applies broadly to all tables in the page.

table {

border-collapse:collapse;

width:100%;

max-width:700px;

min-width:400px;

text-align:center;

}

caption {

caption-side:bottom;

font-weight:bold;

font-style:italic;

margin:4px;

}

table,th, td {

border: 1px solid gray;

}

th, td {

height: 24px;

padding:4px;

vertical-align:middle;

}

th {

background-image:url(table-shaded.png);

}

.rowtitle {

font-weight:bold;

}

The attributesborder-collapse and border allow to make a border of uniform width.

The caption-side attribute puts the label below the table. You can omit the attribute to keep it on top.

The descriptor .rowtitle is used for row headers in the second table, for the demonstration. One may also use

tags as in the first one. But in this case the hight must be the same for headers and other cells.

text-align and vertical-align center labels. We can align them differently, with stylesheets.

Other attributes are for presentation options, including maximum size and minimum size, the row heights.

The JavaScript function

The alternation of colors for the row of the tables is obtained by a JavaScript function. It allow to easily edit the rows of the table without having to worry about the colors.

It applies broadly to all rows in all tables in the page.

function colourize() {

var dnl = document.getElementsByTagName("tr");

for(i = 0; i < dnl.length; i++) {

if((Math.round(i / 2) * 2) == ((i / 2) * 2) )

dnl.item(i).style.background="#F0F0F0";

}

}

window.onload = colourize;

A DOMNodeList object containing all

tag is created, and the color attribute is changed for all the tags whose index is odd.

Pretty HTML table demonstration

Simple code

It is a table tag with

rows and or cells.

It uses

tags for the headers of columns.

Usage

Fast

Safe

Desktop

C++

Pascal

Server side

PHP

Java

Client side

JavaScript

CSS

System

C

Go

Full HTML code

It adds the caption, thead, and tbody tags. The rendering is the same in both Firefox and Internet Explorer.

The choice of background images and colors is independent of the structure of the table.

Caption : Label of the table

Usage

Fast

Safe

Desktop

C++

Pascal

Server side

PHP

Java

Client side

JavaScript

CSS

System

C

Go

Alternating background of rows without JavaScript

Possible in CSS for IE9 and other browsers. We add the following selector to the tr property:

table tr:nth-child(odd) td {

background-color: #F0F0F0;

}

or with a class name:

.pretty tr:nth-child(odd) td {

background-color: #F0F0F0;

}

Pseudo-classes with the form :name are not supported by older versions of Internet Explorer.

© 2010-2017 Xul.fr