HTML is made up of elements and it doesn't care about how these elements are styled. They are in the page where they are in the page. If you need something before the table then you place the element before the table...if you need something after the table then you place things after the table.
The flow of the page (when it is rendered) may be modified using the element's style property. You can either set the individual style properties or you can set the style "class" that the element should use. The classes etc can be defined in Cascading Style Sheets.
Now that that's clarified, if you want to know the height of the table you can do so using JavaScript. Once you get a reference to the HTML element in your JavaScript code you can access that element's offsetHeight property (or clientHeight property depending on which browser you're using) to determine the physical height of the element as displayed in the browser. Likewise you can determine the width of the element using the offsetWidth (or clientWidht) property.
Here is an example of some JavaScript that will retrieve an HTML table element (with the ID "myTable") and display the table's physical height and width:
-
<html>
-
<body>
-
-
<table id="myTable" border="1">
-
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
-
<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
-
<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
-
<tr><td>3,1</td><td>3,2</td><td>3,3</td></tr>
-
<tr><td>4,1</td><td>4,2</td><td>4,3</td></tr>
-
<tr><td>5,1</td><td>5,2</td><td>5,3</td></tr>
-
<tr><td>6,1</td><td>6,2</td><td>6,3</td></tr>
-
<tr><td>7,1</td><td>7,2</td><td>7,3</td></tr>
-
<tr><td>8,1</td><td>8,2</td><td>8,3</td></tr>
-
</table>
-
-
<script type="text/javascript">
-
var myTable = document.getElementById("myTable");
-
var width = myTable.offsetWidth ? myTable.offsetWidth : myTable.clientWidth;
-
var height= myTable.offsetHeight ? myTable.offsetHeight: myTable.clientWidth;
-
-
var str = "myTable's height: "+height+"px myTable's width: "+width+"px";
-
alert(str);
-
</script>
-
-
</body>
-
</html>
-
Now, there's a couple of things to note here. First of all, this is not specific to tables. This code will tell you the physical height and width of any* DOM (HTML) element. So you can also use this to get the height and width of a <div> element for example. *The element must have layout (
haslayout property) in order to use the offsetHeight/clientHeight and offsetWidth/clientWidth.
The other thing to note is that the element
must be visible in order for this to work. So that means that if your element has a style of "display:none" the offsetHeight/clientHeight and offsetWidth/clientWidht will always be 0.
-Frinny
2
