﻿/*
	CSS table model

	http://www.w3.org/TR/CSS2/tables.html

	CSS 2.0
*/
.fixedLayout	{ display: table; width: 100%; height: 100%; table-layout: fixed; } 
.table			{ display: table; width: 100%; height: 100%; table-layout: auto; } 
.tr				{ display: table-row; width: auto; height: auto; }
.thead			{ display: table-header-group; width: auto; height: auto; }
.tbody			{ display: table-row-group; width: auto; height: auto; }
.tfoot			{ display: table-footer-group; width: auto;  height: auto;}
.col			{ display: table-column; width: auto; height: auto; }
.colgroup		{ display: table-column-group; width: auto;  height: auto;}
.th				{ display: table-cell; width: auto; height: auto; text-align: center; vertical-align: top; padding: 3px; float: left; }
.td				{ display: table-cell; width: auto; height: auto; text-align: center; vertical-align: top; padding: 3px; float: left; }
.caption		{ display: table-caption; caption-side: top; width: auto; height: auto; text-align: center; vertical-align: middle; }



/*
	IE 6


.fixedLayout	{ display: block; width: 100%; height: 100%; table-layout: fixed; } 
.table			{ display: block; width: 100%; height: 100%; table-layout: auto; } 
.tr				{ display: block; width: auto; height: auto; }
.thead			{ display: table-header-group; width: auto; height: auto; }
.tbody			{ display: block; width: auto; height: auto; }
.tfoot			{ display: table-footer-group; width: auto; height: auto;}
.col			{ display: inline; width: auto; height: auto; text-align: center; vertical-align: top; padding: 3px; float: left; }
.colgroup		{ display: block; width: auto;  height: auto;}
.th				{ display: inline; width: auto; height: auto; text-align: center; vertical-align: top; padding: 3px; float: left; }
.td				{ display: inline; width: auto; height: auto; text-align: center; vertical-align: top; padding: 3px; float: left; }
.caption		{ display: inline; width: auto; height: auto; text-align: center; vertical-align: middle; }
*/

/*
<!--
	Sample Html implementation

	For IE 6 you will have to specifiy a width for td classes as well as use SPAN tag as opposed to the DIV tag
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Table Layout</title>
	<link type="text/css" href="TableLayout.css" rel="Stylesheet" />
	<!-- 
		WE NEED TO SPECIFY rel="Stylesheet" ATTRIBUTE IN THE LINK TAG FOR THE STYLE TO BE APPLIED CORRECTLY
	-->
</head>
<body>
	<div class="table fixedLayout" style="width: 640px; border: 1px solid red;">
		<div class="caption" style="border: 1px solid yellow;">
			caption</div>
		<div class="th">
		</div>
		<div class="tbody">
			<div class="tr" style="border: 1px solid green;">
				<span class="td" style="width: 33.33%; border: 1px solid blue;">
					column 1
				</span>
				<span class="td" style="width: 33.33%; border: 1px solid blue;">
					column 2
				</span>
				<span class="td" style="width: 33.33%; border: 1px solid blue;">
					column 3
				</span>
			</div>
		</div>
	</div>
</body>
</html>
*/