Multi
Multi
Table CSS Properties; [√]A quick run-through
Topic Started: Wednesday, 13. June 2012, 02:03 (1,106 Views)
Meta Ing
Member Avatar
Level 2
Zetaboards' default CSS rule for tables is as follows:

Code:
 
table {
border-collapse:collapse;
border-spacing:0;
clear:both;
empty-cells:show;
width:100%;
}


Now, you may have looked at these properties and never felt any reason to alter them... However, you may just find it useful to know what they all mean.

Notes

  • I will only be explaining table-specific properties in this tutorial. Width and clear will not be discussed.

  • Note - The following properties can also be applied to elements set to display:table or display:inline-table. Such elements will not inherit properties set on html tables, so you will need to add them manually.


Property
Purpose
Possible ValuesNotes
border-collapse
Specifies whether borders should collapse into a single border or remain separate.

  • separate
  • collapse
If set to collapse, the following properties will be rendered ineffective:

  • border-spacing
  • empty-cells
Additionally, borders will IGNORE a border-radius if specified. (however, background might not, depending on the browser)

Separate is the default value.
border-spacing
Determines the amount of space between table cells.

  • length[1]
  • length-x length-y
If border-collapse is set to collapse, this property will have no effect.

If a background is specified for the table, it will be shown between the cells.

This is the css near-equivalent of the the cellspacing attribute.

length-x refers to the left and right sides of the cell, while length-y refers to the top and bottom.
empty-cells
Specifies whether empty cells should be displayed or hidden

  • show
  • hide
If border-collapse is set to collapse, this property will have no effect.

If set to hide, empty cells will occupy space, but the cell will be invisible.

This property has no effect on table cell outlines.

Show is the default value.
table-layout
Specifies whether the width of columns should be evenly sized or individually determined by content.

  • auto
  • fixed
This property has no effect on table cell heights, which are determined either by the height / min-height / max-height properties, or by the largest cell in the row.

Auto is the default value


Here is a quick demonstration of the above properties and their effects on other properties: http://jsfiddle.net/jH3rV/13/embedded/result/

Additional Notes

[1] Possible Units - mozilla.org
Edited by Meta Ing, Wednesday, 13. June 2012, 15:39.
Off
Profile
Quote
Top
 
Chesterfield
Member Avatar
Level 12
This is a great little tidbit of information. Thanks for sharing. :)
Off
Profile
Quote
Top
 
Cody
Member Avatar
Winter is coming.
Very nice, I didn't know any of the CSS properties you explained before this tutorial, so it was certainly helpful. :)
Posted Image
Posted Image
Off
Profile
Quote
Top
 
Meta Ing
Member Avatar
Level 2
Fixed a mistake and added more info to the border-spacing property. It doesn't accept percent values, but it does allow for two parameters (x and y)
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
The one thing I was unaware of is the fact that you cannot have four different values for the border-spacing property. Aside from that, this tutorial is still nicely written. Good job! :)
Off
Profile
Quote
Top
 
Aidan
Member Avatar
Level 12
Outline Tips & Tricks
A P P R O V E D

Your tutorial has been accepted and your tokens have been added!
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..