CSS Tables

Dr. Fareed Ahmed Jokhio

 TABLES
• You can set the 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.
 TABLES
• 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.
 TABLES
• The table-layout allows browsers to speed up
the 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 order-collapse Property
• This property can have two values collapse
and separate.
• The following example uses both the values:
 The order-collapse Property
• <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;
• }
 The order-collapse Property
• td.b {border-style:solid;
• border-width:3px;
• border-color:#333333;
• padding:10px;
• }
• </style>
 The order-collapse Property
• <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 />
 The order-collapse Property
• <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>
 The order-collapse Property
• It will produce the following result:
 The border-spacing Property
• The border-spacing property specifies the
distance that separates the adjacent cells’
borders.
• It can take either one or two values; these
should be units of length.
 The border-spacing Property
• If you provide one value, it 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.
 The border-spacing Property
• <style type="text/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;}
• </style>
• Now let's modify the previous example and
see the effect:
 The border-spacing Property
• <style type="text/css">
• table.one {
• border-collapse:separate;
• width:400px;
• border-spacing:10px;
• }
• table.two {
• border-collapse:separate;
• width:400px;
• border-spacing:10px 50px;
• }
• </style>
 The border-spacing Property
• <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 />
 The border-spacing Property
• <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>
The border-spacing Property
 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. .
 The caption-side Property
• <style type="text/css">
• caption.top {caption-side:top}
• caption.bottom {caption-side:bottom}
• caption.left {caption-side:left}
• caption.right {caption-side:right}
• </style>
 The caption-side Property
• <table style="width:400px; border:1px solid black;">
• <caption class="top">
• This caption will appear at the top
• </caption>
• <tr><td > Cell A</td></tr>
• <tr><td > Cell B</td></tr>
• </table>
• <br />
 The caption-side Property
• <table style="width:400px; border:1px solid black;">
• <caption class="bottom">
• This caption will appear at the bottom
• </caption>
• <tr><td > Cell A</td></tr>
• <tr><td > Cell B</td></tr>
• </table>
• <br />
 The caption-side Property
• <table style="width:400px; border:1px solid black;">
• <caption class="left">
• This caption will appear at the left
• </caption>
• <tr><td > Cell A</td></tr>
• <tr><td > Cell B</td></tr>
• </table>
• <br />
 The caption-side Property
• <table style="width:400px; border:1px solid
black;">
• <caption class="right">
• This caption will appear at the right
• </caption>
• <tr><td > Cell A</td></tr>
• <tr><td > Cell B</td></tr>
• </table>
The caption-side Property
 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 empty-cells Property
• <style type="text/css">
• table.empty{
• width:350px;
• border-collapse:separate;
• empty-cells:hide;
• }
• td.empty{
• padding:5px;
• border-style:solid;
• border-width:1px;
• border-color:#999999;
• }
• </style>
 The empty-cells Property
• <table class="empty"> • <td
• <tr> class="empty">value</td>
• <th></th> • </tr>
• <th>Title one</th> • <tr>
• <th>Title two</th> • <th>Row Title</th>
• </tr> • <td
• <tr> class="empty">value</td>
• <th>Row Title</th> • <td class="empty"></td>
• <td • </tr>
class="empty">value</td> • </table>
The empty-cells Property
 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.
 The table-layout Property
• <style type="text/css">
• table.auto
• {
• table-layout: auto
• }
• table.fixed
• {
• table-layout: fixed
• }
• </style>
 The table-layout Property
• <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 />
 The table-layout Property
• <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>
The table-layout Property
 BORDERS
• The border properties allow you to specify how the
border of the box representing an element should
look.
• There are three properties of a border you can change:
• The border-color specifies the color of a border.
• The border-style specifies whether a border should be
solid, dashed line, double line, or one of the other
possible values.
• The border-width specifies the width of a border.
 The border-color Property
• The border-color property allows you to
change the color of the border surrounding an
element.
• You can individually change the color of the
bottom, left, top and right sides of an
element's border using the properties:
 The border-color Property
• border-bottom-color changes the color of bottom
border.
• border-top-color changes the color of top border.
• border-left-color changes the color of left border.
• border-right-color changes the color of right
border.
• The following example shows the effect of all these
properties:
 The border-color Property
• <style type="text/css">
• p.example1{
• border:1px solid;
• border-bottom-color:#009900; /* Green */
• border-top-color:#FF0000; /* Red */
• border-left-color:#330000; /* Black */
• border-right-color:#0000CC; /* Blue */
• }
 The border-color Property
• p.example2{
• border:1px solid;
• border-color:#009900; /* Green */
• }
• </style>
• <p class="example1">
• This example is showing all borders in different colors.
• </p>
• <p class="example2">
• This example is showing all borders in green color only.
• </p>
 The border-color Property
• It will produce the following result:
 The border-style Property
• The border-style property allows you to select
one of the following styles of border:
• none: No border. (Equivalent of border-
width:0;)
• solid: Border is a single solid line.
• dotted: Border is a series of dots.
• dashed: Border is a series of short lines.
• double: Border is two solid lines.
 The border-style Property
• groove: Border looks as though it is carved into
the page.
• ridge: Border looks the opposite of groove.
• inset: Border makes the box look like it is
embedded in the page.
• outset: Border makes the box look like it is
coming out of the canvas.
• hidden: Same as none, except in terms of border-
conflict resolution for table elements.
 The border-style Property
• You can individually change the style of the bottom,
left, top, and right borders of an element using the
following properties:
• border-bottom-style changes the style of bottom
border.
• border-top-style changes the style of top border.
• border-left-style changes the style of left border.
• border-right-style changes the style of right border.
• The following example shows all these border styles:
 The border-style Property
• <p style="border-width:4px; border-style:none;">
• This is a border with none width.
• </p>
• <p style="border-width:4px; border-style:solid;">
• This is a solid border.
• </p>
• <p style="border-width:4px; border-style:dashed;">
• This is a dahsed border.
• </p>
 The border-style Property
• <p style="border-width:4px; border-style:double;">
• This is a double border.
• </p>
• <p style="border-width:4px; border-style:groove;">
• This is a groove border.
• </p>
• <p style="border-width:4px; border-style:ridge">
• This is aridge border.
• </p>
 The border-style Property
• <p style="border-width:4px; border-style:inset;">
• This is a inset border.
• </p>
• <p style="border-width:4px; border-style:outset;">
• This is a outset border.
• </p>
• <p style="border-width:4px; border-style:hidden;">
• This is a hidden border.
• </p>
 The border-style Property
• <p style="border-width:4px;
• border-top-style:solid;
• border-bottom-style:dashed;
• border-left-style:groove;
• border-right-style:double;">
• This is a a border with four different styles.
• </p>
The border-style Property
 The border-width Property
• The border-width property allows you to set
the width of an element borders.
• The value of this property could be either a
length in px, pt, or cm, or it should be set to
thin, medium, or thick.
• You can individually change the width of the
bottom, top, left, and right borders of an
element using the following properties:
 The border-width Property
• border-bottom-width changes the width of
bottom border.
• border-top-width changes the width of top border.
• border-left-width changes the width of left border.
• border-right-width changes the width of right
border.
• The following example shows all these border
width:
 The border-width Property
• <p style="border-width:4px; border-style:solid;">
• This is a solid border whose width is 4px.
• </p>
• <p style="border-width:4pt; border-style:solid;">
• This is a solid border whose width is 4pt.
• </p>
• <p style="border-width:thin; border-style:solid;">
• This is a solid border whose width is thin.
• </p>
 The border-width Property
• <p style="border-width:medium; border-
style:solid;">
• This is a solid border whose width is medium;
• </p>
• <p style="border-width:thick; border-
style:solid;">
• This is a solid border whose width is thick.
• </p>
 The border-width Property
• <p style="border-bottom-width:4px;
• border-top-width:10px;
• border-left-width: 2px;
• border-right-width:15px;
• border-style:solid;">
• This is a a border with four different width.
• </p>
The border-width Property
 Border Properties Using Shorthand

• The border property allows you to specify

color, style, and width of lines in one property:
• The following example shows how to use all
the three properties into a single property.
• This is the most frequently used property to
set border around any element
 Border Properties Using Shorthand

• <p style="border:4px solid red;">

• This example is showing shorthand property
for border.
• </p>
• It will produce the following result:
 MARGINS
• The margin property defines the space around
an HTML element.
• It is possible to use negative values to overlap
content.
• The values of the margin property are not
inherited by the child elements.
• We have the following properties to set an
element margin.
 MARGINS
• The margin specifies a shorthand property for setting
the margin properties in one declaration.
• The margin-bottom specifies the bottom margin of an
element.
• The margin-top specifies the top margin of an
element.
• The margin-left specifies the left margin of an element.
• The margin-right specifies the right margin of an
element.
 The Margin Property
• The margin property allows you to set all of
the properties for the four margins in one
declaration.
• Here is the syntax to set margin around a
paragraph:
 The Margin Property
• <style type="text/css">
• p {margin: 15px}
• all four margins will be 15px
• p {margin: 10px 2%}
• top and bottom margin will be 10px, left and
right margin will be 2% of the total width of
the document.
 The Margin Property
• p {margin: 10px 2% -10px}
• top margin will be 10px, left and right margin will
be 2% of the total width of the document, bottom
margin will be -10px
• p {margin: 10px 2% -10px auto}
• top margin will be 10px, right margin will be 2% of
the total width of the document, bottom margin
will be -10px, left margin will be set by the browser
• </style>
 The Margin Property
• Here is an example:
• <p style="margin: 15px; border:1px solid black;">
• all four margins will be 15px
• </p>
• <p style="margin:10px 2%; border:1px solid black;">
• top and bottom margin will be 10px, left and right
margin will be 2% of the total width of the document.
• </p>
 The Margin Property
• <p style="margin: 10px 2% -10px; border:1px
solid black;">
• top margin will be 10px, left and right margin
will be 2% of the total width of the document,
bottom margin will be -10px
• </p>
 The Margin Property
• <p style="margin: 10px 2% -10px auto;
border:1px solid black;">
• top margin will be 10px, right margin will be
2% of the total width of the document,
bottom margin will be -10px, left margin will
be set by the browser
• </p>
 The Margin Property
• It will produce the following result:
 The margin-bottom Property
• The margin-bottom property allows you to set
the bottom margin of an element.
• It can have a value in length, %, or auto.
• Here is an example:
 The margin-bottom Property
• <p style="margin-bottom: 15px; border:1px solid
black;">
• This is a paragraph with a specified bottom margin
• </p>
• <p style="margin-bottom: 5%; border:1px solid
black;">
• This is another paragraph with a specified bottom
margin in percent
• </p>
 The margin-bottom Property
• It will produce the following result:
 The margin-top Property
• The margin-top property allows you to set the
top margin of an element.
• It can have a value in length, %, or auto.
• Here is an example:
 The margin-top Property
• <p style="margin-top: 15px; border:1px solid
black;">
• This is a paragraph with a specified top margin
• </p>
• <p style="margin-top: 5%; border:1px solid
black;">
• This is another paragraph with a specified top
margin in percent
• </p>
 The margin-top Property
• It will produce the following result:
 The margin-left Property
• The margin-left property allows you to set the
left margin of an element.
• It can have a value in length, %, or auto.
• Here is an example:
 The margin-left Property
• <p style="margin-left: 15px; border:1px solid
black;">
• This is a paragraph with a specified left margin
• </p>
• <p style="margin-left: 5%; border:1px solid
black;">
• This is another paragraph with a specified top
margin in percent
• </p>
 The margin-left Property
• It will produce the following result:
 The margin-right Property
• The margin-right property allows you to set
the right margin of an element.
• It can have a value in length, %, or auto.
• Here is an example:
 The margin-right Property
• <p style="margin-right: 15px; border:1px solid
black;">
• This is a paragraph with a specified right margin
• </p>
• <p style="margin-right: 5%; border:1px solid
black;">
• This is another paragraph with a specified right
margin in percent
• </p>
 The margin-right Property
• It will produce the following result: