Css Tables

CSS - TABLES
http://www.tutorialspoint.com/css/css_tables.htm Copyright © tutorialspoint.com
This tutorial will teach you how to set different properties of an HTML table using CSS. You can set
following properties of a table −
The border-collapse specifies whether the browser should control the appearance of the
adjacent borders that touch each other or whether each cell should maintain its style.
The border-spacing specifies the width that should appear between table cells.
The caption-side captions are presented in the <caption> element. By default, these are
rendered above the table in the document. You use the caption-side property to control the
placement of the table caption.
The empty-cells specifies whether the border should be shown if a cell is empty.
The table-layout allows browsers to speed up layout of a table by using the first width
properties it comes across for the rest of a column rather than having to load the whole table
before rendering it.
Now, we will see how to use these properties with examples.
The border-collapse Property:

This property can have two values collapse and separate. The following example uses both the
values:
<html>
<head>
<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
padding:10px;
}
</style>
</head>
<body>
<table >
<caption>Collapse Border Example</caption>
<tr><td > Cell A Collapse Example</td></tr>
<tr><td > Cell B Collapse Example</td></tr>
</table>
<br />
<table >
<caption>Separate Border Example</caption>
<tr><td > Cell A Separate Example</td></tr>
<tr><td > Cell B Separate Example</td></tr>
</table>
</body>
</html>
It will produce the following result −
The border-spacing Property

The border-spacing property specifies the distance that separates adjacent cells'. borders. It can
take either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify
two values, in which case, the first refers to the horizontal spacing and the second to the vertical
spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>
Now let's modify the previous example and see the effect −
<html>
<head>
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table >
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table >
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>
The caption-side Property

The caption-side property allows you to specify where the content of a <caption> element should
be placed in relationship to the table. The table that follows lists the possible values.
This property can have one of the four values top, bottom, left or right. The following example uses
each value.
NOTE: These properties may not work with your IE Browser.
<html>
<head>
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style="width:400px; border:1px solid black;">

<caption >
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />

<caption >
This caption will appear at the bottom
</caption>
</table>
<br />

<caption >
This caption will appear at the left
</caption>
</table>
<br />

<caption >
This caption will appear at the right
</caption>
</table>
</body>
</html>
The empty-cells Property

The empty-cells property indicates whether a cell without any content should have a border
displayed.
This property can have one of the three values - show, hide or inherit.
Here is the empty-cells property used to hide borders of empty cells in the <table> element.
<html>
<head>
table.empty{
width:350px;
empty-cells:hide;
}
td.empty{
padding:5px;
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<table >
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td >value</td>
<td >value</td>
</tr>
<tr>
<th>Row Title</th>
<td >value</td>
<td ></td>
</tr>
</table>
</body>
</html>
The table-layout Property

The table-layout property is supposed to help you control how a browser should render or lay out a
table.
This property can have one of the three values: fixed, auto or inherit.
The following example shows the difference between these properties.
NOTE − This property is not supported by many browsers so do not rely on this property.
<html>
<head>
table.auto {
table-layout: auto
}
table.fixed{
table-layout: fixed
}
</style>
</head>
<body>
<table >
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table >
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>

Css Tables

Uploaded by

Copyright:

Available Formats

Css Tables

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Tables

Uploaded by

Copyright:

Available Formats

CSS - TABLES

http://www.tutorialspoint.com/css/css_tables.htm Copyright © tutorialspoint.com

Now, we will see how to use these properties with examples.

The border-collapse Property:

It will produce the following result −

The border-spacing Property

NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.

It will produce the following result −

The caption-side Property

NOTE: These properties may not work with your IE Browser.

<table style="width:400px; border:1px solid black;">

<table style="width:400px; border:1px solid black;">

<table style="width:400px; border:1px solid black;">

<table style="width:400px; border:1px solid black;">

It will produce the following result −

The empty-cells Property

It will produce the following result −

The table-layout Property

The following example shows the difference between these properties.

It will produce the following result −

You might also like