Gugu Ncube

, ,

Tableless CSS – CSS Tables replacing HTML Tables

—

by

Gugu Ncube
in , ,

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





   

     
        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

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





   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

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





   

     
         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

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *