Tableless CSS – CSS Tables replacing HTML Tables

Posted on by

Examples of Pure CSS Tables which replace certain types of HTML Tables

Tableless CSS – Example 1


This is Cell Nr. 1.1.
row=1, column=1


This is Cell Nr. 1.2.
row=1, column=2


This is Cell Nr. 1.3.
row=1, column=3

This is Cell Nr. 2.1.
row=2, column=1


This is Cell Nr. 2.2.
row=2, column=2


This is Cell Nr. 2.3.
row=2, column=3

CSS Code and HTML for Example 1

Tableless CSS – Example 2

table.row1


This is Cell Nr. 1.1.
row=1, column=1


This is Cell Nr. 1.2.
row=1, column=2


This is Cell Nr. 1.3.
row=1, column=3

table.row2


This is Cell Nr. 2.1.
row=2, column=1


This is Cell Nr. 2.2.
row=2, column=2


This is Cell Nr. 2.3.
row=2, column=3

CSS Code and HTML for Example 2

Tableless CSS – Example 3


This is Cell Nr. 1.1.
row=1
column=1
width=td1=100px


This is Cell Nr. 1.2.
row=1
column=2
width=td2=100px


This is Cell Nr. 1.3.
row=1
column=3
width=300px


This is Cell Nr. 1.4.
row=1
column=4
width=300px

This is Cell Nr. 2.1.
row=2
column=1
width=same as 1.1 above


This is Cell Nr. 2.2.
row=2
column=2
width=same as 1.2 above


This is Cell Nr. 2.3.
row=2
column=3
width=same as 1.3 above


This is Cell Nr. 2.4.
row=2
column=4
width=same as 1.4 above

CSS Code and HTML for Example 3

About Gugulethu Ncube

IT enthusiast getting things done.