Stages Documentation

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
72:editor_tables [2019/02/18 17:53] – [Use CSS Styles for Tables] ext-bkkr72:editor_tables [2019/02/18 18:00] – [Use CSS Styles for Tables] ext-bkkr
Line 20: Line 20:
 ==== Use CSS Styles for Tables ==== ==== Use CSS Styles for Tables ====
  
-  - Insert a table and enter some text in the table header and cells. +1. Insert a table and enter some text in the table header and cells. 
-  - Enter at least the following css style definitions in the custom.css file on the Stages server because these styles are predefined in the standard.css file. The classname (in this example <font inherit/Courier New,Courier,monospace;;inherit;;inherit>minimal_table_style</font>) must be specified after the <font inherit/Courier New,Courier,monospace;;inherit;;inherit>stages_description</font>class.+ 
 +2. Enter at least the following css style definitions in the custom.css file on the Stages server because these styles are predefined in the standard.css file. The classname (in this example <font inherit/Courier New,Courier,monospace;;inherit;;inherit>minimal_table_style</font>) must be specified after the <font inherit/Courier New,Courier,monospace;;inherit;;inherit>stages_description</font>class.
  
 <code> <code>
Line 33: Line 34:
 .stages_description .minimal_table_style tr h3, .stages_description .minimal_table_style tr h3,
 .stages_description .minimal_table_style tr img {} .stages_description .minimal_table_style tr img {}
 +</code>
 +
 +3. Define the class name in the table properties advanced tab field **Stylesheet Classes**.
 +
 +//Note: You can also enter an ID if you have a css definition with ID's//.
 +
 +In this example, the style class is named <font inherit/Courier New,Courier,monospace;;inherit;;inherit>minimal_table_style</font>.
 +
 +<code>
 +.stages_description .minimal_table_style table {
 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 + font-size: 12px;
 + background: #fff;
 + width: 480px;
 + border-collapse: collapse;
 + text-align: left;
 + margin: 20px;
 +}
 +.stages_description .minimal_table_style tr {
 + vertical-align: top;
 +}
 +.stages_description .minimal_table_style td {
 + border-bottom: 1px solid #ccc;
 + color: #669;
 + padding: 6px 8px;
 +}
 +.stages_description .minimal_table_style th {
 + font-size: 14px;
 + font-weight: normal;
 + color: #039;
 + border-bottom: 2px solid #6678b1;
 + padding: 10px 8px;
 +}
 +.stages_description .minimal_table_style tr p,
 +.stages_description .minimal_table_style tr h1,
 +.stages_description .minimal_table_style tr h2,
 +.stages_description .minimal_table_style tr h3,
 +.stages_description .minimal_table_style tr img {
 + color: #669;
 +}
 +</code>
 +
 +This example uses the CSS id selector <font inherit/Courier New,Courier,monospace;;inherit;;inherit>minimal_table_style</font>in the advanced tab of the table properties.
 +
 +<code>
 +table#minimal_table_style{
 + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 + font-size: 12px;
 + background: #fff;
 + width: 480px;
 + border-collapse: collapse;
 + text-align: left;
 + margin: 20px;
 +}
 +#minimal_table_style tr{
 + vertical-align: top;
 +}
 +#minimal_table_style td{
 + border-bottom: 1px solid #ccc;
 + color: #669;
 + padding: 6px 8px;
 +}
 +#minimal_table_style th{
 + font-size: 14px;
 + font-weight: normal;
 + color: #039;
 + border-bottom: 2px solid #6678b1;
 + padding: 10px 8px;
 +}
 +#minimal_table_style tr p,
 +#minimal_table_style tr h1,
 +#minimal_table_style tr h2,
 +#minimal_table_style tr h3,
 +#minimal_table_style tr img {
 + color: #669;
 +}
 </code> </code>