Jump to content

CSS Table at bottom of page


Recommended Posts

Windows 7, IE 8, Ultraedit Text editor

Experience level: Novice


I read that HTML tables are out and CSS Tables in. The problem is that the table is display at the bottom of the page, above all the text that is written below the table. I want the table to be presented were it is elaborated in my text.


At the top of the document in the <head> is

<style>table, th, td { border: 1px solid black;                min-width: 75px; }</style>

Further down the table starts off like this:

<p><table> <tr>  <th>Item</th>  <th>Value</th>  <th>Units of Measure</th> </tr> <tr>  <td>Standard Air Pressure</td>  <td>101.3</td>  <td>KPa (Kilopascal)</td> </tr> </p>


That did not format right. I hope the reader can figure out my intent.

Below the table is another paragraph :

<p>next paragraph</p>

when viewed in the browser the table is below the text "next paragraph" I want the table above all the text that follows the table in the htm document.

Is this sufficient to show my error?


Thanks for your time




Link to comment
Share on other sites

You can't wrap tables inside a <p> element. <p> specifically indicates a paragraph, with text in it. A table stands on its own, it doesn't need to be wrapped.


What browsers do when you try to wrap a table or block-level elements in a <p> tag is to close the <p> element first, then load the next element outside of it.


You forgot to close your </table> element, which is why the <p> element that's following it is not being rendered in the right place.


Make sure your code is valid using the HTML validator: http://validator.w3.org/

It is very important to have valid code so that CSS and Javascript will work properly.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...