Template:Tablestyles

From Wikibooks, open books for an open world
Jump to: navigation, search
CSS Properties Summary
Commonly used style rules for Wiki markup tables :

Tables2.jpg

There are two different sets of style rules in use; a set of HTML attributes that is associated with the specific elements in tables, and a Cascading Style Sheet set, CSS properties, that is of more general use.

Each of table, caption, row, and cell can be considered as separate elements in the more general building of tables. In each case where an attribute refers to the same format as a CSS property at the same level of the same element, the CSS property takes priority.

A short list of each style-set is given for quick reference though these listings are by no means complete. A link has been provided at the bottom of this drop-list for a full CSS properties reference.




HTML Attributes for Tables; use the format;

attribute1=value1 attribute2=value2 attributeN=valueN

 
Example               Values                     Element*   Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

align=left**          left,right,center,         T, R, C    positions table or text**            
                      (plus justify for text)               in immediate container 

valign=top****        top, middle, bottom        R, C       vertical alignment of TEXT

border=1*****         0 for none, 1-7            T          all borders at once

cellpadding=5px       0 for none, px, pt, em     T          padding for all cell text
                                                            with one entry      

cellspacing=5px****** 0 for none, px, pt, em     T          between all table cells 
                                                            with one entry 

height=100px***       px, pt, cm, em, %          C          cell height, though likely
                                                            to increase with contents     

width=200px***        px, pt, cm, em, %          T, C       table or cell width

colspan="2"           number of columns.         C          joins cells rightward 

rowspan="2"           number of rows.            C          joins cells downward

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
*      T=Table, R=Rows, C=Cells of any kind
**     Align in cells applies horizontal text-alignment.
***    If not specified, the dimensions will adjust to the text.
****   If not specified, the default is middle
*****  Do not use border spacing styles with this attribute; only ''cellspacing''.
****** Do not use border styles with this attribute; only the ''border'' attribute.



CSS Style Rules; use the format;

style="property1:value1; property2:value2; propertyN:valueN;"

Example                   Values                     Elements**    Purpose 
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

caption-side:top          top,right,bottom,          T           only some browsers
                          and left

text-align:right          left,right,center,         T, R, C     horizontal alignment of text
                          and justify 

vertical-align:top        top, middle, bottom        C           Vertical-align text or image

background:yellow         name, rgb, hex,            T, R, C     background color
                          and transparent

color:blue                name, rgb, hex             T, R, C     text color

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

font-family:arial         font or family name        T, R, C     font or font-list      

font-size:20pt            px, pt, cm, em, %          T, R, C     text size

font-style:italic         italic, normal             T, R, C     text style

font-weight:bold          bold, normal               T, R, C     text weight

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

padding:5px 0 0 0         px, pt, cm, em             T, C        sequence top,right,bottom,left

margin:0 0 5px 0          px, pt, cm, em, %          T           sequence top,right,bottom,left

border:2px solid red*     width, type, color         T, C        border on all four sides

border-collapse:          separate or collapse       T           cell spacing or not

border-spacing:10px       px, pt, cm, em             T           cell spacing all-round

border-spacing:7px 5px    px, pt, cm, em             T           in form horizontal vertical 

table-layout:fixed        auto or fixed              T           expands with text or not  

width:400px               px, pt, cm, em  %          T, C        sets table or cell width 

height:200px              px, pt, cm, em  %          T, C        sets table or cell height 

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

line-height:2em***        px, pt, cm, em             T, R, C     height between text lines

letter-spacing:5px        px, pt, cm, em             T, R, C     space between text characters

word-spacing:10px         px, pt, cm, em             T, R, C     space between words of text

white-space:pre-wrap      browser issues             T           long line text wrapping,(soon)

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

* Separate border properties also exist; border-top,border-right,border-bottom, and border-left.
**   T=Table, R=Rows, C=Cells of any kind
***    Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>,
      <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>.  Line-height fails within a <span>.    



Style Expression Spacing Rules for WIKITEXT


Main Points to Avoid

  • Line breaks are not permitted within style expressions. Let the software do the wrapping.
  • Spaces are not permitted immediately before colons or semi-colons.

These have Latitude

  • Space between the various table symbols and the word style is OK.
  • Space around any equals symbol is OK.
  • Space between the style rules and their outside parentheses is OK.
  • Spaces after colons and semi-colons are OK.
  • A semi-colon can be placed immediately after the last style rule.

In addition

  • Compound values like '2px solid black' must be space-separated.
  • HTML attributes must be separated from CSS style expressions with space.
  • HTML element line-spacing is permitted but not for Wikitext elements.
  • Wikitext and HTML table elements can be indented for clarity.
  • Long lines in code LISTINGS can wrap only if there are some spaces added.



Combining the two style rule methods:

It is possible to mix the attributes with CSS styles provided that they keep to their own local formats. That is to say; nothing with an equals sign between the quotes, and no CSS rules outside of them. Note that the Wiki apostrophe codes and various HTML tags can still be used directly on text. An example of mixed styles is shown below.

{| border=1 width=300px style="background:lightyellow;color:maroon;"
| height=100px| <u>''First''</u> cell
| style="background:black;color:white;" width=200px align=center|''Second'' cell
|}


Priorities for Inline Styles.

When there is a contest at the same level between an attribute and a style, the style will have priority.

When two similar properties exist in a style expression, each having a different value, the second value will be taken.

When there are two entire style expressions in the same table line, the second is ignored. The same situation applies for two similar attributes in a line; the second is ignored.





Refer to CSS Reference List for more detailed descriptions of properties and values.



Uses[edit]

Makes a drop box containing a summary of the table style rules. Call the template onto a page or the sandbox as follows:

{{tablestyles}}


See Also[edit]