Tools & Widgets

Tables

Often people use tables to control layout, particularly for rows of images. We have created CSS styles that you should use instead. Get the code for CSS tables.

Grid Table

This type of table is useful for "People" pages that have a number of headshots, or if you have a series of images you would like to display.

model table picture

John Resident,MD

model table picture

John Resident,MD

model table picture

John Resident,MD

model table picture

John Resident,MD

model table picture

John Resident,MD

model table picture

John Resident,MD

model table picture

John Resident,MD

model table picture

John Resident,MD

Article Table

This table style is useful if you have a page with multiple photos and bios, or multiple images with lengthy descriptions.

model table picture 

John Resident, MD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies, est a tincidunt fringilla, ex diam varius neque, in porttitor augue arcu in quam. Sed nunc justo, ultricies et pretium a, varius vitae est. Nam libero ex, ultrices eu commodo nec, vestibulum nec quam. Integer neque velit, facilisis sit amet sodales nec, pellentesque in massa. Morbi lacinia, erat sed mattis faucibus, lacus urna euismod ex, sed accumsan nisi quam at velit. Fusce nunc odio, mattis ut nulla ac, facilisis ultrices leo. Vestibulum tempor eleifend augue, vitae fermentum lorem.

model table picture 

John Resident, MD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies, est a tincidunt fringilla, ex diam varius neque, in porttitor augue arcu in quam. Sed nunc justo, ultricies et pretium a, varius vitae est. Nam libero ex, ultrices eu commodo nec, vestibulum nec quam. Integer neque velit, facilisis sit amet sodales nec, pellentesque in massa. Morbi lacinia, erat sed mattis faucibus, lacus urna euismod ex, sed accumsan nisi quam at velit. Fusce nunc odio, mattis ut nulla ac, facilisis ultrices leo. Vestibulum tempor eleifend augue, vitae fermentum lorem.

model table picture 

John Resident, MD

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies, est a tincidunt fringilla, ex diam varius neque, in porttitor augue arcu in quam. Sed nunc justo, ultricies et pretium a, varius vitae est. Nam libero ex, ultrices eu commodo nec, vestibulum nec quam. Integer neque velit, facilisis sit amet sodales nec, pellentesque in massa. Morbi lacinia, erat sed mattis faucibus, lacus urna euismod ex, sed accumsan nisi quam at velit. Fusce nunc odio, mattis ut nulla ac, facilisis ultrices leo. Vestibulum tempor eleifend augue, vitae fermentum lorem.

When you have data or a lot of contact information to display, a standard HTML table is appropriate. Instructions for how to create the below are here.

Example Table:

​Default Style - light, header row, first column

​I'm a Table​Labor​Parts
​text​I'm more text​So Am I
​Hip Replacement$4850.14​​$177.38
​Pre Cat 02 Sensors​$125.00​$79.99
​The Meaning of Life​Object reference not set to an instance of an object10 ? "Hello "
15 ? "Please "
20 ? "Thank You "
25 goto 10

​Default Style - style 1, clear

​ouygogvkhgv​oguvgviytc​gvigvkgvkgvvg
​dsxdxyt​hfjfcfgch​jgfcjfgc
​gfcjgfc​hfh​ghgfcghc
​gfxjgf​gfc​gfcc
​gfcjf​jgfcjgfc​jfgcjfcjgf

​Default Style 2 - light banded

​rthrthrhttrh​​
ege​​I'm text too​rthrht
​efefe​rhtrthr​
​rthrth​rthrth​Blah
​​​

​Default Style 3, medium two tones

​ntnytntn​khgvkhgv​khgvkgvkg
​rnrnrtn​ghvhgvj​hgvkhvg
​hgvkgv​hgvhgv​khgv
​ghvkhgv​khgvkhg​khgvh
​​​

​Default Style 4 - light lines

​column1​kgvikgv​khgvkgh
​kghvkv​kghvkgv​khgvk
​khgvkhgv​kghv​kghv
​kghv​kghv​kghv
​khgv​kghvkghv​kgv

 

​Default Style 5 - grid

​column1​khvkhv​jlhkjhv
​hgivhgkjhvj​jkhvjhvlhjvkh​kjhvkhjvkv
​kjh​kjhvhjvkhjv​kjhvhjvljhv
​jhvljhvjhvlhv​khgvkhgvkgv​kghvkhgvkhgvk
​​​
​