www.webdeveloper.com
Results 1 to 7 of 7

Thread: use css to position block elements in a table

  1. #1
    Join Date
    Dec 2011
    Posts
    6

    use css to position block elements in a table

    text-align:whatever works great on inline elements inside
    Code:
    <td></td>
    tags, but have been hacking away with no results to get a block element to align inside the table data tags. Tried all sort of margin, div, postion, width, etc. combinations. Good old align:whatever works as an html table attribute, but yields validation errors.

    Does anyone know how to use CSS to align block elements in a table cell?

    Thanks

    Ed

  2. #2
    Join Date
    Dec 2011
    Posts
    6
    Well this isn't good...
    Maybe my question is bad.
    Let me restate:

    Using
    Code:
    <table align:center>
    works for block elements inside a table cell
    Code:
    <td><ol>...</ol></td>
    but does not validate. Validating returns an error stating that align:center is obsolete and to use CSS
    Using
    Code:
    <table style="text-align:center;">
    only works for inline elements not block elements.

    Is there a CSS solution for positioning block elememts inside a table cell that will validate?

    thanks

  3. #3
    Join Date
    Aug 2006
    Posts
    1,897
    As far as I know, the standard css methods for aligning block elements will work fine inside a <td>. For example <ol style="margin-left:10px"> should work, no?

    Do you have a full code example of something you've tried that does not work?

    Dave

  4. #4
    Join Date
    Jul 2009
    Posts
    184
    Here's a basic example of how to apply text-align: center; to a block level unordered list:

    Code:
    <!DOCTYPE>
    <html>
    	<head>
    		<title>text-align: center;</title>
    		<style type="text/css" media="screen">
    			* { margin: 0; padding: 0; }
    			td { width: 200px; border: 1px solid #00f; }
    			td ul { text-align: center; border: 1px solid #f00; list-style: none; }
    		</style>
    	</head>
    	
    	<body>
    		
    		<table>
    			<tr><td><ul><li>centered</li></ul></td></tr>
    		</table>
    		
    	</body>
    	
    </html>

  5. #5
    Join Date
    Dec 2011
    Posts
    6
    Thanks tracknut / webwest

    Here is some test code with webwest's CSS in the head. Was using inline styling for testing as it seems faster for me if you are trying to sort things out.

    Note that the lone cell is aligned right under the header, which is the goal, with the table being a block element being set to the right. If you change "right" to "left" or "center", another desired functional aspect, all is well . With the CSS I tried not so much. Maybe I just missed something. How do I get rid of all the HTML tags and get the same results?

    Using FF15 for a browser. Sure chrome acts about the same. Not worried about IE.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>table test case</title>
    <!--		<style type="text/css" media="screen">			
    			* { margin: 0; padding: 0; }
    			td { width: 200px; border: 1px solid #00f; }
    			td ul { text-align: center; border: 1px solid #f00; list-style: none; }
    		</style>
    -->
    	</head>
    	<body>
    		<div style="width:800px;">
    		<table align="right" style="border:solid 1px;">
    			<tr>
    				<th>This is a really long header so the cell will stretch</th>
    			</tr>
    			<tr>
    			<td>
    				<table align="center" style="border:dashed 1px;">
    					<tr>
    						<td>centerUp</td>
    					</tr>
    				</table>
    			<td>
    		</table>
    		</div>
    	</body>
    </html>
    Last edited by edziffel; 08-31-2012 at 07:01 PM.

  6. #6
    Join Date
    Aug 2006
    Posts
    1,897
    This would be a lot easier without the tables, but I'll play along...

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>table test case</title>
    <!--		<style type="text/css" media="screen">			
    			* { margin: 0; padding: 0; }
    			td { width: 200px; border: 1px solid #00f; }
    			td ul { text-align: center; border: 1px solid #f00; list-style: none; }
    		</style>
    -->
    	</head>
    	<body>
    		<div style="width:800px;">
    		<table style="float:right;border:solid 1px;">
    			<tr>
    				<th>This is a really long header so the cell will stretch</th>
    			</tr>
    			<tr>
    			<td>
    				<table style="width:200px;margin:0 auto;border:dashed 1px;">
    					<tr>
    						<td><span style="display:block;text-align:center">centerUp</span></td>
    					</tr>
    				</table>
    			</td>
    			</tr>
    		</table>
    		</div>
    	</body>
    </html>
    Dave

  7. #7
    Join Date
    Dec 2011
    Posts
    6

    SOLVED Center block elements in a table cell

    tracknut,

    And there it is.

    Was totally missing the float and display:block, which seems embarrassingly obvious now that I'm looking at it. After all, how else does one expect to display a block?

    Just what I needed. Good stuff.

    Thank you very much.
    Last edited by edziffel; 09-01-2012 at 11:23 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles