Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS - Tables
#1
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 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.

Hello World!:

- tes
- Hello Friends . Welcome Back
Hasan
Reply
#2
The border-collapse Property:
This property can have two values collapse and separate. Following is the example to show both values:

css:

table.one {border-collapse:collapse;}
table.two {border-collapseConfusedeparate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {border-styleConfusedolid;
border-width:3px;
border-color:#333333;
padding:10px;
}

HTML
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>

Hello World!:

- tes
- Hello Friends . Welcome Back
Hasan
Reply
#3
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.

CSS
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}

Now let's modify previous example and see the effect:

CSS:

table.one {
border-collapseConfusedeparate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapseConfusedeparate;
width:400px;
border-spacing:10px 50px;
}
HTML:

<table class="one" border="1">
<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 class="two" border="1">
<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>

Hello World!:

- tes
- Hello Friends . Welcome Back
Hasan
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  CSS white-space Property Hasan 0 1,320 07-04-2018, 03:29 AM
Last Post: Hasan
  CSS - Links Hasan 1 1,958 06-28-2018, 09:47 AM
Last Post: Hasan
  CSS - Images Hasan 3 1,963 06-28-2018, 09:37 AM
Last Post: Hasan
  css text effect Hasan 9 1,572 06-28-2018, 09:34 AM
Last Post: Hasan
  Setting Fonts using CSS Hasan 7 1,655 06-28-2018, 09:30 AM
Last Post: Hasan
  Setting Backgrounds using CSS Hasan 1 1,225 06-28-2018, 03:31 AM
Last Post: Hasan
  CSS - Colors Hasan 0 1,442 06-28-2018, 03:23 AM
Last Post: Hasan
  CSS Syntax - Selectors Hasan 0 1,227 06-28-2018, 03:20 AM
Last Post: Hasan
  CSS Introduction Hasan 0 1,221 06-28-2018, 03:19 AM
Last Post: Hasan

Forum Jump:


Users browsing this thread: 1 Guest(s)