KS-CSS Tables

CSS Tables

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.
The border-collapse Property
This property can have two values collapse and separate.
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.
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.
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.
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.

Example:

                                    <!DOCTYPE html>
<html>

<head>
    <title>CSS Table Example</title>
    <style>
         table.one {border-collapse:collapse;}
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
         table.two {
            border-collapse:separate;
            width:400px;
            border-spacing:10px;
         }
        table.empty {
            width:350px;
            border-collapse:separate;
            empty-cells:hide;
         }
         td.empty {
            padding:5px;
            border-style:solid;
            border-width:1px;
            border-color:#999999;
         }
        table.auto {
            table-layout: auto
         }
         table.fixed {
            table-layout: fixed
         }
        
    </style>
</head>

<body>
    <table class = "one">
         <caption>Collapse Border Example</caption><br />
         <tr><td class = "a"> Cell One Collapse Example</td></tr>
         <tr><td class = "b"> Cell Two Collapse Example</td></tr>
      </table>
      <br />
     <table class = "two" border = "1">
         <caption>Separate Border Example with border-spacing</caption>
         <tr><td> Cell one Collapse Example</td></tr>
         <tr><td> Cell two Collapse Example</td></tr>
      </table>
    <br />
    <table class = "empty">
         <tr>
            <th></th>
            <th>Title 1</th>
            <th>Title 2</th>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">cell</td>
            <td class = "empty">cell</td>
         </tr>
      
         <tr>
            <th>Row Title</th>
            <td class = "empty">cell</td>
            <td class = "empty"></td>
         </tr>
      </table>
      <br />
    <table class = "auto" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
      <br />
      
      <table class = "fixed" border = "1" width = "100%">
         <tr>
            <td width = "20%">1000000000000000000000000000</td>
            <td width = "40%">10000000</td>
            <td width = "40%">100</td>
         </tr>
      </table>
        
</body>

</html>

Output:

Previous Next

Do you Know?

Progamming is what actually means ?

What is software development ?

How we categorized software development in different manner.

C Programming
C Plus Plus
Python
Java Development
Web Designing
Javascript
Mysql
Oracle

We cover all the programming concepts in various programming languages, this tutorials are very help full for bigener as well as Experience developer, for the ease of understanding we categorized programming in different manner likewise.

CSS Tables

The border-collapse Property

The border-spacing Property

The caption-side Property

The empty-cells Property

The table-layout Property

Example:

Output:

Do you Know?

Facilities

Get in Touch

CSS Tables

The border-collapse Property

The border-spacing Property

The caption-side Property

The empty-cells Property

The table-layout Property

Example:

Output:

Do you Know?

Facilities

Get in Touch

Follow Us

Twitter | Facebook | Instagram | Linkedin