Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Register Tags Active Topics RSS Search Mark Forums Read

Sponsored Links



Changing the style of tables in CSS

Software Development


Reply
 
Thread Tools Search this Thread
  #1  
Old 25-12-2010
Member
 
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">

Reply With Quote
  #2  
Old 25-12-2010
Member
 
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
Reply With Quote
  #3  
Old 25-12-2010
Member
 
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; 
}
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "Changing the style of tables in CSS"
Thread Thread Starter Forum Replies Last Post
How to make single page into Landscape page style and rest of them in default style in OpenOffice? Hridayeshu Windows Software 4 19-02-2012 03:29 PM
VPN and routing tables Allison Networking & Security 4 25-11-2010 12:02 AM
Changing User Password w/o Changing FingerPrint Patz Hardware Peripherals 1 09-04-2010 12:37 AM
How to use Tables in Java? Rob Dizzle Software Development 4 11-02-2010 06:04 AM
Changing the style of the start menu in XP? Anathakrishnan Customize Desktop 3 25-02-2009 04:54 PM


All times are GMT +5.5. The time now is 01:55 PM.