Html Tables

Tables require special attention in css because they are organized structures. Link for tables. When the <table> element is rendered, it generates a block-level box by default.

cssTables

CSS allows to attach a table behaviour to any structure that is organized similarly to a table using the display property.

PropertiesDescription
tableattaches a table behaviour to an element
table-rowattaches a table row behaviour to an element
table-cellattaches a table cell behaviour to an element

The table structure is based on the generic <div> and <span> blocks.

snippet
<html> 
<head> 
    <style> 
        div span{border: 1px solid #000000; padding: 5px; margin:5px;} 
        div {display:table;} 
        div div{display:table-row;} 
        div div span{display:table-cell;} 
    </style> 
</head> 
<body> 
    <div> 
        <div><span>data1</span><span>data2</span></div> 
        <div><span>data3</span><span>data4</span></div> 
        <div><span>data5</span><span>data6</span></div> 
    </div> 
</body> 
</html>
Advanced Html tables

In html we can add sections to a table using the element for the table caption, the <thead> and <tfoot> elements to add a header and a footer, and one or more <tbody> elements to define body sections. <colgroup> and <col> elements can be used to define column attributes.

Advanced css tables

To define a table structure having sections, the following possible values of display property

PropertiesDescription
table-row-groupcorresponds to <tbody> elements
table-header-groupcorresponds to <thead> elements
table-footer-groupcorresponds to <tfoot> elements
table-column-groupcorresponds to <colgroup> elements
table-columncorresponds to <col> elements
table-captioncorresponds to <caption> elements

The <caption> element , the 'caption-side' property allows to define where the table caption will be rendered. The possible values are.

bottom | left | right | top (the default value)
snippet
<html> 
<head> 
    <style> 
        *{border-width: 1px; border-style: solid; padding: 5px margin: 5px;} 
        div.table{display:table;} 
        div.row{display:table-row;} 
        div.cell{display:table-cell;} 
        div.caption{display:table-caption; caption-side:right;} 
        div.c1{width:100px; text-align:right; background:gray} 
        div.c2 {width:200px; text-align:center} 
        div.th-group {display:table-header-group; color:red;} 
        div.tr-group {display:table-row-group; font-style:italic;} 
        div.tf-group {display:table-footer-group; color:blue;} 
    </style> 
</head> 
<body> 
    <div class="table"> 
        <div class="th-group"> 
            <div class="row"> 
                <div class="cell c1">data 1</div> 
                <div class="cell c2">data 2</div> 
            </div> 
        </div> 
        <div class="tr-group"> 
            <div class="row"> 
                <div class="cell c1">data 3</div> 
                <div class="cell c2">data 4</div> 
            </div> 
        </div> 
        <div class="tf-group"> 
            <div class="row"> 
                <div class="cell c1">data 5</div> 
                <div class="cell c2">data 6</div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>
Column properties

There are several properties than can be applied to the <col> elements of a table.

PropertiesValuesDescription
border<length> <border-style> <color>it defines the border width, style and color.
background<color>it defines the background color.
width<length>it defines the column width.
visibilityhide | hidden | inherit | show | visibleit defines how the column is rendered.
snippet
<html> 
<head> 
    <style> 
        *{border: 1px solid gray;} 
        col.col1{font-style:italic; backgroud:yellow;} 
        col.col2{visibility:hidden;} 
        col.col3{width:200px; color:blue;} 
    </style> 
</head> 
<body> 
    <table> 
		<colgroup> 
			<col width="50" class="col1"> 
			<col width="150" class="col2"> 
			<col class="col3"> 
		</colgroup> 
		<tr><td>data 1</td><td>data 2</td></tr> 
		<tr><td>data 3</td><td>data 4</td></tr> 
	</table> 
</body> 
</html>
Table layout

Browser render a table according the value of the table-layout property.

The possible values are

PropertiesValues
auto(default) First the table data is read, then the row and cell data is complete rendered using the minimum necessary space.
fixedFirst, the table rows and cells are rendered using the specified values for width and height, then the table data is rendered using the existing space.
snippet
<html> 
<head> 
    <style> 
        *{border: 1px solid gray;} 
        table.col1{table-layout:auto;} 
        table.col2{table-layout:fixed;} 
        table td{width:50px;} 
        table tr{height:50px;} 
    </style> 
</head> 
<body> 
    <table class="col1"> 
		<tr><td>data 1<td>data 2<td>data 3 
		<tr><td>data 4<td>data 5<td>data 6 
	</table> 
 
	<table class="col2"> 
		<tr><td>data 1<td>data 2<td>data 3 
		<tr><td>data 4<td>data 5<td>data 6 
	</table> 
</body> 
</html>
vertical alignment

The vertical-align property allows you to set the vertical alignment between several in-line elements that belong to the same parent (eg - same table cell)

The possible values are

PropertiesDescription
baseline | top | bottom | middle | sub | super | text-top | text-bottom
<length> or <percentage>
snippet
<html> 
<head> 
    <style> 
        span {border:1px solid red;} 
    </style> 
</head> 
<body> 
    <table> 
        <tr> 
            <td> 
                <span style="vertical-align: baseline;">baseline</span> 
                <span style="vertical-align: top;">top</span> 
                <span style="vertical-align: bottom;">bottom</span> 
                <span style="vertical-align: middle;">middle</span> 
                <span style="vertical-align: sub;">sub</span> 
                <span style="vertical-align: super;">super</span> 
                <span style="vertical-align: text-top;">text-top</span> 
                <span style="vertical-align: 300%;">300%</span> 
                <span style="vertical-align: -5px;">-50px</span> 
            </td> 
        </tr> 
    </table> 
</body> 
</html>
horizontal alignment

The text-align property allows you to set the horizontal alignment for the content relative to the element box. This property can also be attached to the <col> or <table> element. The 'text-align' property is inherited by all the child elements when applied to the parent element.

The possible values are

PropertiesDescription
center | justify | left | right
<string>(only for table cells; eg text-align: ".")
Note:
Note
The default value is left. The <col> setting has a greater priority that the <tr> setting.
snippet
<html> 
<head> 
    <style> 
        span {border:1px solid red;} 
    </style> 
</head> 
<body> 
    <table> 
        <tr> 
            <td style="text-align:center">center align text</td> 
            <td style="text-align:justify">justify align text</td> 
        </tr> 
        <tr> 
            <td style="text-align:left">left align text</td> 
            <td style="text-align:right">right align text</td> 
        </tr> 
    </table> 
</body> 
</html>
Border for table cells

CSS allows you to define the style, width and color for the table elements, similar to any kind of boxes. It can be done using border-style, boder-width, border-color or border properties.

Note
The <tr> elements are rendered without a border. The style defined for a <table> element doesn't apply to its children. The style defined for <tr> elements applies to the <td> elements. (only internet explorer)
snippet
<html> 
<head> 
    <style> 
        td {border:1px solid gray;} 
        .none {border-sty;e: none} 
        .hidden {border-style: hidden} 
        .dotted {border-style: dotted} 
        .dashed {border-style: dashed} 
        .solid {border: 1px solid red;} 
        .double {border-style: double} 
        .groove {border-style: groove} 
        .ridge {border-style: ridge} 
        .inset {border-style: inset} 
        .outset {border-style: outset} 
    </style> 
</head> 
<body> 
        <table> 
		<tr><td class="none">none</td><td class="hidden">hidden</td></tr> 
		<tr><td class="dotted">dotted</td><td class="dashed">dashed</td></tr> 
		<tr><td class="solid">solid</td><td class="double">double</td></tr> 
		<tr><td class="groove">groove</td><td class="ridge">ridge</td></tr> 
		<tr><td class="inset">inset</td><td class="outset">outset</td></tr> 
	</table> 
</body> 
</html>
border spacing

The border-spacing property determines the distance between the border of two adjacent cells. This property allows you to specify different spacing values horizontally and vertically.

The possible values are

ValuesDescription
<length>horizontal_distance=vertical_distance
<length> <length> horizontal_distance vertical_distance
snippet
 <html> 
<head> 
    <style> 
        table {border: 1px solid blue;} 
        table td {border: 1px solid red;} 
    </style> 
</head> 
<body> 
    <table cellspacing="10"> 
		<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> 
		<tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> 
		<tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> 
	</table> 
	<table style="border-spacing:10px 20px;"> 
		<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> 
		<tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> 
		<tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> 
	</table> 
</body> 
</html>
empty cells

The empty-cells property determines if an empty cell is rendered with a border.

The possible values are

PropertiesDescription
showto render an empty cell with a border
hideto render an empty cell without a border
snippet
<html> 
<head> 
    <style> 
        * {border: 1px solid #000000; padding: 10px; margin:2px;} 
    </style> 
</head> 
<body> 
<table> 
	<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> 
	<tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> 
	<tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> 
</table> 
<table style="empty-cells:show;"> 
	<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> 
	<tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> 
	<tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> 
</table> 
</body> 
</html>
border collapse

The border-collapse determines the border model of the table cells.

The possible values are

PropertiesDescription
collapsedefines a collapsing border model
separateddefines a separated border model
snippet
<html> 
<head> 
    <style> 
        table tr td {border: 1px solid #000000; padding: 10px; margin:10px;} 
    </style> 
</head> 
<body> 
	<table style="border-collapse:collapse; border-spacing: 10px" cellspacing="10"> 
		<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> 
		<tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> 
		<tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> 
	</table> 
	<table style="border-collapse:separate; border-spacing: 10px" cellspacing="10"> 
		<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr> 
		<tr><td>data 4</td><td>data 5</td><td>data 6</td></tr> 
		<tr><td>data 7</td><td>data 8</td><td>data 9</td></tr> 
	</table> 
</body> 
</html>
Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #