Results 1 to 3 of 3

Thread: Changing the style of tables in CSS

  1. #1
    Join Date
    Sep 2010
    Posts
    73

    Changing the style of tables in CSS

    Some properties of CSS are designed to change styling of tables. In the analysis of the properties we will restrict ourselves to the enunciation of the basic concepts, leaving out the myriad of details and often complex rules that govern its behavior. Moreover, the use of these properties is very small given that the same results can be obtained in various ways, even with the traditional embedded systems (X) HTML.

    table-layout

    This property sets the method of layout of a table. It is not inherited. It applies only to tables.
    <selector> {table-layout: <value>;}

    Values -
    • car. The layout of the table is automatically set by the browser.
    • fixed. The presentation rules are those set by the author in CSS.

    If the value is assigned to drive all of UA-rendering engine. Using fixed instead we first define the table width using the width property. Wanting to create a table of 400px, then, we will write this rule:
    Code:
    table { 
    table-layout: fixed; 
    width: 400px; 
    }
    You understand well that the same thing you can get in (X) HTML, always using the width attribute:
    Code:
    <table width="400px">

  2. #2
    Join Date
    Sep 2010
    Posts
    73

    Re: Changing the style of tables in CSS

    border-collapse

    With this property we can determine how to treat the edges and the spaces between cells in a table. This only applies to tables and is inherited.
    <selector> {border-collpse: <value>;}

    Values -
    • collapse. If you set a border, the table cells share it.
    • separate. If you set a border, each cell has its own, separate from the others. The space between cells and between the edges is set with the border-spacing.

    Examples
    Code:
    table { 
    border: 2px solid black; 
    border-collapse: separate; 
    border-spacing: 5px; 
    }
    border-spacing

    Sets the space between cells in a table. It should be used only in the presence of a model set up separate border-collapse. Inherited property and applies only to tables.

    Syntax
    <selector> {border-spacing: <value>;}

    Values -
    • a numeric value with units

  3. #3
    Join Date
    Sep 2010
    Posts
    73

    Re: Changing the style of tables in CSS

    empty-cells

    Manages the processing of table cells without content. It acts only on those that do not have within them any kind of markup, even the classic quote in its kind to simulate the presence of content. Inherited property.

    Syntax
    <selector> {empty-cells: <value>;}

    Values -
    • show. Show the cell borders.
    • hide. The edges are not shown and you will see only a blank space.


    caption-side

    The good standards of accessibility that takes a table is always preceded by a sort of title / abstract. In (X) HTML this function is delegated to the tag <CAPTION> of which we give below an example of the syntax:

    Code:
    <table> 
    <caption> title of the table </ caption> 
    <tr> 
    <td> ... 
    </Table>
    The property caption-side down the side on which we want to bring up this title is inherited. The only support Mozilla.

    Syntax
    <selector> {caption-side: <value>;}

    Values -
    • top. Caption at the top.
    • right. Caption on the right side.
    • bottom. Caption on the bottom.
    • left. Caption on the left side.

    Code:
    table.table9 { 
    table-layout: fixed; 
    width: 300px; 
    background: Silver; 
    caption-side: bottom; 
    }

Similar Threads

  1. Replies: 4
    Last Post: 19-02-2012, 03:29 PM
  2. VPN and routing tables
    By Allison in forum Networking & Security
    Replies: 4
    Last Post: 25-11-2010, 12:02 AM
  3. Changing User Password w/o Changing FingerPrint
    By Patz in forum Hardware Peripherals
    Replies: 1
    Last Post: 09-04-2010, 12:37 AM
  4. How to use Tables in Java?
    By Rob Dizzle in forum Software Development
    Replies: 4
    Last Post: 11-02-2010, 06:04 AM
  5. Changing the style of the start menu in XP?
    By Anathakrishnan in forum Customize Desktop
    Replies: 3
    Last Post: 25-02-2009, 04:54 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •