Part 8 - Lists & Tables | CSS

CSS Lists

Lists come in two basic flavors: unordered and ordered. However, CSS allows for more list customization than HTML -- to the extent that even images can be used as bullet points for unordered lists!.

CSS List Style Type

If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes.

Unordered list styles: square, circle, disc (default), and none
Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none

CSS Code:

ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }

Display:

Here is an ordered list:

This list is
using roman
numerals
with CSS!

and now an unordered list:

This list is
using circle types
with CSS!

CSS Lists With Images

As we stated in the introduction, CSS lists allow you to insert an image in place of the normal bullets. A good choice for a bullet image would one that is smaller than the height of your text and is a relatively simple/plain graphic.

CSS Code:

ul { list-style-image: url("listArrow.gif"); } 
ol { list-style-image: url('/listArrow2.gif'); }

Display:

Here is an unordered list:

This list is
using a picture with CSS!

and now an ordered list:

This list is
using a picture
with CSS!

As you can see, it does not matter if the lists are <ul> or <ol> when using images. Nevertheless, it is a good coding practice to only use images for an unordered list. Ordered lists usually have an incremented (growing) value that appears next to each list item and you can't do this with just one image.

CSS List Position

With CSS, it is possible to alter the indentation that takes place with your list items. See the example below for the trick of indenting your lists.

CSS Code:

ul { list-style-position: inside; } 
ol { list-style-position: outside; }

Display:

This list is
using inside
positioning with CSS!

and now an ordered list:

This list is
using outside
positioning with CSS!

Note: "Outside" is actually the default setting for indentation.

List: All in One

It is possible to combine the above CSS techniques into one line of CSS. This is useful if you would like to have a list-style-type take the place of your list image, if the image is not able to be loaded.

CSS Code:

ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}

Display:

This list's image did
NOT load correctly
But because we chose to include
A CSS list type, we avoided a bland list!

CSS Table Properties

The CSS table properties allow you to set the layout of a table.
Browser support: IE: Internet Explorer, M: Mac IE only, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Property	Description	Values	IE	F	N	W3C
border-collapse	Sets whether the table borders are collapsed into a single border or detached as in standard HTML	collapse separate	5	1	7	2
border-spacing	Sets the distance that separates cell borders (only for the "separated borders" model)	length length	5M	1	6	2
caption-side	Sets the position of the table caption	top bottom left right	5M	1	6	2
empty-cells	Sets whether or not to show empty cells in a table (only for the "separated borders" model)	show hide	5M	1	6	2
table-layout	Sets the algorithm used to display the table cells, rows, and columns	auto fixed	5	1	6	2

Example:

Peter	Griffin
Lois	Griffin

Cleveland	Brown
Glenn	Quagmire

Note: The border-spacing property does not work in Internet Explorer.

E-Learning

Monday, 1 August 2011