Quick Reference Sheets for Webmasters
Quick Reference sheets are packed full of useful information for webmasters of all levels.
CSS Reference Sheet
Tables & Lists
table-layout
The 'table-layout' property controls the algorithm used to lay out the table cells, rows, and columns.
Value
auto |
fixed |
inherit
Default
auto
Applies to
table and inline-table elements
example:
table-layout: fixed;
border-collapse
This property selects a table's border model. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model.
Value
collapse |
separate |
inherit
Default
separate
Applies to
table and inline-table elements
example:
border-collapse: collapse;
border-spacing
This property specifies the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing.
Value
length |
length |
inherit
Default
0
Applies to
table and inline-table elements
example:
border-spacing: 15pt;
empty-cells
This property controls the characteristics of an empty table cell. With a value of show, borders and backgrounds are drawn around/behind empty cells such as normal cells. A value of hide means that no borders or backgrounds are drawn around/behind empty cells. Furthermore, if all the cells in a row have a value of hide and have no visible content, the entire row behaves as if it had 'display: none;'
Value
show |
hide |
inherit
Default
show
Applies to
table-cell elements.
example:
empty-cells: hide;
list-style
The list-style property is a shorthand notation for setting the three properties list-style-type, list-style-image, and list-style-position at the same place in your style sheet.
Value
list-style-type |
list-style-position |
list-style-image |
inherit
Default
n/a
Applies to
block-level elements
example:
list-style: disc outside url(triangle.gif);
list-style-type
This property specifies how the marker of a list item will be displayed. The value of none specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems.
Value
disc |
square |
decimal |
decimal-leading-zero |
lower-roman |
upper-roman |
lower-greek |
upper-latin |
armenian |
georgian |
none |
inherit
Default
disc
Applies to
list items or elements with 'display: list-item'
example:
list-style-type: decimal;
list-style-image
This property sets the image that will be used as the list item marker. When the iamge is available, it will replace the marker set by the list-style-type property.
Value
url |
none |
inherit
Default
none
Applies to
list items or elements with 'display: list-item'
example:
list-style-image: url(triangle.gif);
list-style-position
The list-style-position property specifies the position of the marker box in the principal block box. A value of 'outside' sets the market to be outside of the principal block box. A value of 'inside' sets the market to be the first inline box in the principal block box, after which the element's content flows.
Value
inside |
outside |
inherit
Default
outside
Applies to
list items or elements with 'display: list-item'
example:
list-style-position: outside;
