Home

Site HTML sample templates

DIV's as a table examples

Variable widths

The first column is set to col1 "40px" second set to col3 "160px" and the third set to col6 "340px"

ID
Customer Name
Customer Address
12
Paul Deschamps
3 Fairmont ave Ottawa On K1Y1X4

Same widths

Each column is set to col3 "160px"

ID
Customer Name
Customer Address
12
Paul Deschamps
3 Fairmont ave Ottawa On K1Y1X4

Styled like a table

Though this is the case where tables should actually be used for datatables instead of divs.

ID
Customer Name
Customer Address
12
Paul Deschamps
3 Fairmont ave Ottawa On K1Y1X4
12
Paul Deschamps
3 Fairmont ave Ottawa On K1Y1X4

Images and content

Maecenas suscipit ipsum non lectus rutrum congue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit ipsum non lectus rutrum congue. In nulla nisi, ultricies dapibus viverra vel, malesuada vitae justo. Aenean quis dolor sagittis neque rhoncus pulvinar ac non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu odio metus. Aenean condimentum, nisl et cursus pulvinar, leo massa tempor leo, ac auctor urna risus id felis. Pellentesque interdum fermentum ante, vulputate iaculis nisl ullamcorper et. Sed ut lorem nisi, vitae luctus est.

Maecenas suscipit ipsum non lectus rutrum congue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit ipsum non lectus rutrum congue. In nulla nisi, ultricies dapibus viverra vel, malesuada vitae justo. Aenean quis dolor sagittis neque rhoncus pulvinar ac non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu odio metus. Aenean condimentum, nisl et cursus pulvinar, leo massa tempor leo, ac auctor urna risus id felis. Pellentesque interdum fermentum ante, vulputate iaculis nisl ullamcorper et. Sed ut lorem nisi, vitae luctus est.

Maecenas suscipit ipsum non lectus rutrum congue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit ipsum non lectus rutrum congue. In nulla nisi, ultricies dapibus viverra vel, malesuada vitae justo. Aenean quis dolor sagittis neque rhoncus pulvinar ac non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu odio metus. Aenean condimentum, nisl et cursus pulvinar, leo massa tempor leo, ac auctor urna risus id felis. Pellentesque interdum fermentum ante, vulputate iaculis nisl ullamcorper et. Sed ut lorem nisi, vitae luctus est.

Maecenas suscipit ipsum non lectus rutrum congue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit ipsum non lectus rutrum congue. In nulla nisi, ultricies dapibus viverra vel, malesuada vitae justo. Aenean quis dolor sagittis neque rhoncus pulvinar ac non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu odio metus. Aenean condimentum, nisl et cursus pulvinar, leo massa tempor leo, ac auctor urna risus id felis. Pellentesque interdum fermentum ante, vulputate iaculis nisl ullamcorper et. Sed ut lorem nisi, vitae luctus est.

Maecenas suscipit ipsum non lectus rutrum congue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit ipsum non lectus rutrum congue. In nulla nisi, ultricies dapibus viverra vel, malesuada vitae justo. Aenean quis dolor sagittis neque rhoncus pulvinar ac non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu odio metus. Aenean condimentum, nisl et cursus pulvinar, leo massa tempor leo, ac auctor urna risus id felis. Pellentesque interdum fermentum ante, vulputate iaculis nisl ullamcorper et. Sed ut lorem nisi, vitae luctus est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit ipsum non lectus rutrum congue. In nulla nisi, ultricies dapibus viverra vel, malesuada vitae justo. Aenean quis dolor sagittis neque rhoncus pulvinar ac non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu odio metus. Aenean condimentum, nisl et cursus pulvinar, leo massa tempor leo, ac auctor urna risus id felis. Pellentesque interdum fermentum ante, vulputate iaculis nisl ullamcorper et. Sed ut lorem nisi, vitae luctus est.

Maecenas suscipit ipsum non lectus rutrum congue

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit ipsum non lectus rutrum congue. In nulla nisi, ultricies dapibus viverra vel, malesuada vitae justo. Aenean quis dolor sagittis neque rhoncus pulvinar ac non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu odio metus. Aenean condimentum, nisl et cursus pulvinar, leo massa tempor leo, ac auctor urna risus id felis. Pellentesque interdum fermentum ante, vulputate iaculis nisl ullamcorper et. Sed ut lorem nisi, vitae luctus est.

Using the "dataTable" class on a TABLE

Type Class Color
Fruit Apple Red
Circle Shape Blue
80's Car Rectangle Blue

Collapseable lists

List 1:

List 2:

Fruit
Apple
Grape
Pear
Cars
FORD
GM
HONDA
Phones
BB loremipsum set admit
Andriod
iPhone

Collapsable table

Three tables one in each LI for the collapsable content.