Academic Tutorials



English | French | Portugese | German | Italian
Home Advertise Payments Recommended Websites Interview Questions FAQs
News Source Codes E-Books Downloads Jobs Web Hosting
Chats

CSS 2.0
CSS 2.0 Introduction
CSS 2.0 Attaching Style
CSS 2.0 Applying Style
CSS 2.0 Key Concepts
CSS 2.0 Color Contents
CSS 2.0 Fonts Contents
CSS 2.0 Text
CSS 2.0 Lists
CSS 2.0 the box model
CSS 2.0 Advanced concepts
CSS 2.0 Positioning
CSS 2.0 Boxes
CSS 2.0 Generated content
CSS 2.0 Dynamic effects
CSS 2.0 Tables
CSS 2.0 Paged media
CSS 2.0 Font Face
CSS 2.0 Aural Style Sheets
CSS 2.0 Language styles

HTML Tutorials
HTML Tutorial
XHTML Tutorial
CSS Tutorial
TCP/IP Tutorial
CSS 1.0
CSS 2.0
HLML
XML Tutorials
XML Tutorial
XSL Tutorial
XSLT Tutorial
DTD Tutorial
Schema Tutorial
XForms Tutorial
XSL-FO Tutorial
XML DOM Tutorial
XLink Tutorial
XQuery Tutorial
XPath Tutorial
XPointer Tutorial
RDF Tutorial
SOAP Tutorial
WSDL Tutorial
RSS Tutorial
WAP Tutorial
Web Services Tutorial
Browser Scripting
JavaScript Tutorial
VBScript Tutorial
DHTML Tutorial
HTML DOM Tutorial
WMLScript Tutorial
E4X Tutorial
Server Scripting
ASP Tutorial
PERL Tutorial
SQL Tutorial
ADO Tutorial
CVS
Python
Apple Script
PL/SQL Tutorial
SQL Server
PHP
.NET (dotnet)
Microsoft.Net
ASP.Net
.Net Mobile
C# : C Sharp
ADO.NET
VB.NET
VC++
Multimedia
SVG Tutorial
Flash Tutorial
Media Tutorial
SMIL Tutorial
Photoshop Tutorial
Gimp Tutorial
Matlab
Gnuplot Programming
GIF Animation Tutorial
Scientific Visualization Tutorial
Graphics
Web Building
Web Browsers
Web Hosting
W3C Tutorial
Web Building
Web Quality
Web Semantic
Web Careers
Weblogic Tutorial
SEO
Web Site Hosting
Domain Name
Java Tutorials
Java Tutorial
JSP Tutorial
Servlets Tutorial
Struts Tutorial
EJB Tutorial
JMS Tutorial
JMX Tutorial
Eclipse
J2ME
JBOSS
Programming Langauges
C Tutorial
C++ Tutorial
Visual Basic Tutorial
Data Structures Using C
Cobol
Assembly Language
Mainframe
Forth Programming
Lisp Programming
Pascal
Delphi
Fortran
OOPs
Data Warehousing
CGI Programming
Emacs Tutorial
Gnome
ILU
Soft Skills
Communication Skills
Time Management
Project Management
Team Work
Leadership Skills
Corporate Communication
Negotiation Skills
Database Tutorials
Oracle
MySQL
Operating System
BSD
Symbian
Unix
Internet
IP-Masquerading
IPC
MIDI
Software Testing
Testing
Firewalls
SAP Module
ERP
ABAP
Business Warehousing
SAP Basis
Material Management
Sales & Distribution
Human Resource
Netweaver
Customer Relationship Management
Production and Planning
Networking Programming
Corba Tutorial
Networking Tutorial
Microsoft Office
Microsoft Word
Microsoft Outlook
Microsoft PowerPoint
Microsoft Publisher
Microsoft Excel
Microsoft Front Page
Microsoft InfoPath
Microsoft Access
Accounting
Financial Accounting
Managerial Accounting
Network Sites


CSS 2.0 Properties - Tables


Previoushome Next






CSS2 Properties - Tables

A D V E R T I S E M E N T



Introduction

Tables present unique difficulties for formatting purposes - are empty cells drawn, are borders separate or together, etc.

They also require different display keywords.




Display keywords

The display keywords for table elements are:

  • table (= <TABLE>)
  • inline-table
  • table-row-group (= <TBODY>)
  • table-column-group (= <COLGROUP>)
  • table-header-group (= <THEAD> - the same as row-group, but always put at the top of the table, above all captions and rows)
  • table-footer-group (= <TFOOT> - the same as row-group, but always put at the bottom of the table, below all rows and captions)
  • table-column (= <COL>)
  • table-row (= <TR>)
  • table-cell (= <TD>)
  • table-caption (= <CAPTION>)

Columns and column groups are not rendered, but allow styles to be set on a whole column.

Note that browsers are permitted to ignore display: on HTML table elements (such as TD), and preserve their existing type.

Note as well that since every table element requires a table, a cell and a row, where one or more of these is missing, the others are implied around it and all similar consecutive sibling elements (e.g., where there are consecutive table rows, a single table will be implied around all of them).

<DIV style="display: table-cell">
</DIV>
<DIV style="display: table-cell">
</DIV>

The above example would have a table and a table row implied around it.




Text-align

Table cells may take a string for text-align indicating the string in that column on which cells will align - e.g., text-align: "." aligns cells along the period. Any cell without the period has its right edge aligned with the period: You can specify text-align on the the table relying on inheritance or on the table but never on the column because text-align has no effect on columns.

Here's an example

<TABLE>
<TR>
<TD style="text-align: '.'">
$950.00
<TD style="text-align: '.'">
$95.00
<TD style="text-align: '.'">
$95
</TABLE>

That would be aligned like this:

$950.00
 $95.00
 $95




Columns and rows

Each cell is in a row and in a column. There is an important distinction however: table-cells are descendants only of rows and not of columns. In addition, only width, border, background and visibility have any effect on columns.




Visibility: collapse

This value for visibility is the same as hidden in that it hides the element, except on rows, row groups, columns and column groups, where it causes the whole row/column not to be displayed. It does not force re-layout of the table, meaning that script languages can be used to hide rows or columns and other content in.

Visibility values other than collapse have no effect on columns.




Caption-side

This indicates where captions should be placed and takes one of: top (caption above the top of the table), bottom, left (caption to the left of the table) and right. Top is the inital value.

It only applies to elements with display: table-caption (including the <CAPTION> element itself), but it is inherited.

Captions above or below tables behave like block elements in that their margins collapse with it. Captions inherit properties from the TABLE itself.

When the caption is on the left or right side, width: auto has the effect of setting a 'reasonable width'. As such, it is recommended that you set width to an explicit value.

When captions are placed to the side of a table, vertical-align expresses the position of the caption. The valid values are top, middle and bottom, all other values being treated as top.




Table-layout

Table-layout specifies the way that the table's dimensions are calculated. It allows you to strike a balance between speed and convenience.

It always best to go for speed unless (and this is a big 'unless', because most of the time it isn't) it is inappropriate to explicitly set width values.

There are two values: auto (initial) and fixed. Table-layout is not inherited, is initially auto, and applies only to tables and inline tables.

Width of table elements

Fixed table layout

Fixed is faster because it does not look at the content of the table:

  1. If a column has its width set to a value other than auto, then the value specified for it sets that column's width.
  2. Otherwise any cell in the first row of the table with a value for width other than auto sets that column's width; if the cell spans several columns, each is given equal width.
  3. Remaining columns split the remaining horizontal space.

The width of the table becomes the larger of width for the table and the sum of column widths, borders and padding.

If the table's width is greater than that of the content, the extra space is spread equally between the columns.

The disadvantage of fixed layouts is that unlike with automatic table cells, content may overflow its cell.

Automatic table layout

Table-layout: auto calculates the table width only after reading the whole of each column. Broadly speaking, table-layout: auto sets the width of table elements to the larger of the width required by the content and the width specified by the width property.




Vertical-align on table elements

Many vertical-align values are inapplicable on table cells, but those that are applicable specify the position of that cell's baseline in relation to the baseline of the row. The applicable values are top (aligns the top of the cell with the top of the first row that it spans (through the HTML rowspan attribute)), middle (aligns the center of the cell with the center of the rows it spans), bottom (aligns the bottom of the cell with the bottom of the last row it spans) and baseline (baseline is aligned with the baseline of the first row its spans). Other values are treated as baseline. The baseline of a cell is that of its first line box; failing that, the bottom of the cell.

Where a cell is shorter than its row, it is given extra padding.




Table conflicts

There are two principal areas where conflicts can occur - backgrounds and borders. CSS provides various rules and properties to specify how these conflicts should be resolved.

Backgrounds

Since rows, row groups, cells, columns and tables may have different backgrounds, cells are assumed to be on top of rows, which in turn are on top of row groups, which are on top of columns, which are on top of column groups, which are on top of tables. Thus the TABLE's background is only visible in a cell if everything on top of it has a transparent background (as most probably they will, given that transparent is the initial value for background).

Borders

Border-collapse

You will probably have been annoyed at one time with the way that adjoining borders do not merge into one, but instead are drawn as separate borders. The border-collapse allows this behavior to be overridden.

It can take the values collapse (initial value - adjoining borders merge into one) or separate (adjoining borders are drawn separately). It is inherited. It applies to tables and inline-tables. Note that although collapse is the initial value, for the <TABLE> element, browsers have border-collapse: separate in their browser style sheet in order to implement the HTML cellspacing attribute.

Margins on table elements

Margins do not apply to table elements except captions, tables and inline tables. However, padding and borders apply to all table elements.

Separated borders

If a table has separated borders, only table cells and tables may have borders - never rows or columns.

Border-spacing

This dictates the distance between adjacent cell borders (and thus between cells). The space is filled with the table element's background. Border-spacing applies to tables and inline-tables. It is inherited.

One or two non-negative lengths can be specified for border-spacing, where the first refers to the horizontal, and second to the vertical spacing (if only one is specified, it refers to both horizontal and vertical spacing). Initially spacing is 0. Percentages are not valid. To give an example, border-spacing: 5px is equivalent to the HTML formatting attribute cellspacing=5.

Empty-cells

This takes the value show (initial value) or hide to control whether empty cells are rendered (i.e., whethere their borders are rendered). It only applies to table-cell elements and is inherited.

Collapsing borders

With collapsing borders, tables and table rows do not have padding; however, cells do.

Collapsing border conflict problems

Clearly adjoining table elements can have different borders. The borders are drawn according to the following rules:

  1. If any of the adjoining elements has border-style: hidden, no border is drawn.
  2. If one of the adjoining elements has a border-style other than none, then it will be drawn (i.e., none is only obeyed when all border-styles are none).
  3. If several elements have a border-style other than none, then the thickest border is drawn.
  4. If several elements have the same width, styles are preferred in this order (from most to least) : double, solid, dashed, dotted, ridge, outset, groove, inset.
  5. If borders differ only in color, cells beat rows, which beat row groups, which beat columns, which beat column groups, which beat tables.

Note also that for tables in the collapsing border model, border-style: inset = border-style: groove, and border-style: outset = border-style: ridge.



Be the first one to comment on this page.




  CSS 2.0 eBooks
More Links » »
 
 CSS 2.0 FAQs
More Links » »
 
 CSS 2.0 Interview Questions
More Links » »
 
 CSS 2.0 Articles

No CSS 2.0 Articles could be found as of now.

 
 CSS 2.0 News

No News on CSS 2.0 could be found as of now.

 
 CSS 2.0 Jobs

No CSS 2.0 Articles could be found as of now.


Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • connotea
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Netvouz
  • RawSugar
  • Reddit
  • scuttle
  • Shadows
  • Simpy
  • Smarking
  • Spurl
  • TailRank
  • Wists
  • YahooMyWeb

Previoushome Next

Keywords: CSS2 Properties - Tables, CSS2, css2, CSS2 tutorial, CSS2 tutorial pdf, history of CSS2, Custamizing Style Sheet, learn CSS2

HTML Quizzes
HTML Quiz
XHTML Quiz
CSS Quiz
TCP/IP Quiz
CSS 1.0 Quiz
CSS 2.0 Quiz
HLML Quiz
XML Quizzes
XML Quiz
XSL Quiz
XSLT Quiz
DTD Quiz
Schema Quiz
XForms Quiz
XSL-FO Quiz
XML DOM Quiz
XLink Quiz
XQuery Quiz
XPath Quiz
XPointer Quiz
RDF Quiz
SOAP Quiz
WSDL Quiz
RSS Quiz
WAP Quiz
Web Services Quiz
Browser Scripting Quizzes
JavaScript Quiz
VBScript Quiz
DHTML Quiz
HTML DOM Quiz
WMLScript Quiz
E4X Quiz
Server Scripting Quizzes
ASP Quiz
PERL Quiz
SQL Quiz
ADO Quiz
CVS Quiz
Python Quiz
Apple Script Quiz
PL/SQL Quiz
SQL Server Quiz
PHP Quiz
.NET (dotnet) Quizzes
Microsoft.Net Quiz
ASP.Net Quiz
.Net Mobile Quiz
C# : C Sharp Quiz
ADO.NET Quiz
VB.NET Quiz
VC++ Quiz
Multimedia Quizzes
SVG Quiz
Flash Quiz
Media Quiz
SMIL Quiz
Photoshop Quiz
Gimp Quiz
Matlab Quiz
Gnuplot Programming Quiz
GIF Animation Quiz
Scientific Visualization Quiz
Graphics Quiz
Web Building Quizzes
Web Browsers Quiz
Web Hosting Quiz
W3C Quiz
Web Building Quiz
Web Quality Quiz
Web Semantic Quiz
Web Careers Quiz
Weblogic Quiz
SEO Quiz
Web Site Hosting Quiz
Domain Name Quiz
Java Quizzes
Java Quiz
JSP Quiz
Servlets Quiz
Struts Quiz
EJB Quiz
JMS Quiz
JMX Quiz
Eclipse Quiz
J2ME Quiz
JBOSS Quiz
Programming Langauges Quizzes
C Quiz
C++ Quiz
Visual Basic Quiz
Data Structures Using C Quiz
Cobol Quiz
Assembly Language Quiz
Mainframe Quiz
Forth Programming Quiz
Lisp Programming Quiz
Pascal Quiz
Delphi Quiz
Fortran Quiz
OOPs Quiz
Data Warehousing Quiz
CGI Programming Quiz
Emacs Quiz
Gnome Quiz
ILU Quiz
Soft Skills Quizzes
Communication Skills Quiz
Time Management Quiz
Project Management Quiz
Team Work Quiz
Leadership Skills Quiz
Corporate Communication Quiz
Negotiation Skills Quiz
Database Quizzes
Oracle Quiz
MySQL Quiz
Operating System Quizzes
BSD Quiz
Symbian Quiz
Unix Quiz
Internet Quiz
IP-Masquerading Quiz
IPC Quiz
MIDI Quiz
Software Testing Quizzes
Testing Quiz
Firewalls Quiz
SAP Module Quizzes
ERP Quiz
ABAP Quiz
Business Warehousing Quiz
SAP Basis Quiz
Material Management Quiz
Sales & Distribution Quiz
Human Resource Quiz
Netweaver Quiz
Customer Relationship Management Quiz
Production and Planning Quiz
Networking Programming Quizzes
Corba Quiz
Networking Quiz
Microsoft Office Quizzes
Microsoft Word Quiz
Microsoft Outlook Quiz
Microsoft PowerPoint Quiz
Microsoft Publisher Quiz
Microsoft Excel Quiz
Microsoft Front Page Quiz
Microsoft InfoPath Quiz
Microsoft Access Quiz
Accounting Quizzes
Financial Accounting Quiz
Managerial Accounting Quiz
Testimonials | Contact Us | Link to Us | Site Map
Copyright ? 2008. Academic Tutorials.com. All rights reserved Privacy Policies | About Us
Our Portals : Academic Tutorials | Best eBooksworld | Beyond Stats | City Details | Interview Questions | Discussions World | Excellent Mobiles | Free Bangalore | Give Me The Code | Gog Logo | Indian Free Ads | Jobs Assist | New Interview Questions | One Stop FAQs | One Stop GATE | One Stop GRE | One Stop IAS | One Stop MBA | One Stop SAP | One Stop Testing | Webhosting in India | Dedicated Server in India | Sirf Dosti | Source Codes World | Tasty Food | Tech Archive | Testing Interview Questions | Tests World | The Galz | Top Masala | Vyom | Vyom eBooks | Vyom International | Vyom Links | Vyoms | Vyom World | Important Websites
Copyright ? 2003-2024 Vyom Technosoft Pvt. Ltd., All Rights Reserved.