Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Location
    Earth
    Posts
    305
    Thanks
    27
    Thanked 2 Times in 2 Posts

    to table or not to table

    I have a 3 column/9 rows "table" that seems to be so much simpler to throw into a html table vs coding css for it. Or am I not using css correctly with this??

    I know that I can use tables but everything I read says not to.

    This is the 1st 3 rows, the next ones I would change all css to have #2 following it and then some modifications for location as well as with #3.

    Code:
    <div id='day'>
    	<div class='day_header'>Day 1</div>
    	<div id='meal_hdr_bk'>Breakfast:
    		<div class="meal">
    			<br>1/2 Grapefruit
    			<br>1 slice of toast
    			<br>2 tbsp of peanut butter
    			<br>Coffee or Tea - black
    		</div>
    	</div>
    
    	<div id='meal_hdr_lunch'>Lunch:
    		<div class="meal">
    			<br>1/2 c tuna
    			<br>1 slice toast
    			<br>Coffee or Tea - black
    		</div>
    	</div>
    	
    	<div id='meal_hdr_dinner'>Dinner:
    		<div class="meal">
    			<br>3 oz of any type of meat
    			<br>1 c green beans
    			<br>1/2 banana
    			<br>1 small apple
    			<br>1 cup vanilla ice cream
    		</div>
    	</div>
    </div>
    css
    Code:
    <style type="text/css">
    	#day {
    		width: 600px;
    		border: 1px solid #333;
    		margin-left:13px;
    	}
    	#day .day_header {
    		background: pink;
    	}
    	#meal_hdr_bk {
    		width: 200px;
    		position: absolute;
    		top: 28px;
    		left: 21px;
    		border: 1px solid #333;
    	}
    	#meal_hdr_lunch {
    		width: 200px;
    		border: 1px solid #333;
    		position: absolute;
    		top:28px;
    		left: 221px;
    	}
    	#meal_hdr_dinner {
    		width: 200px;
    		border: 1px solid #333;
    		position: absolute;
    		top: 28px;
    		left: 421px;
    	}
    </style>
    So what are peoples take on this??

  • #2
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    There is nothing wrong with using tables. The assumption is you are using tables for tabular data and not to position unrelated things on a page. It looks to me like you are using tabular data so a table is appropriate.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    Some mobile devices always put a border around all HTML table cells so as to make the table easier to read. Provided that the table actually contains tabular data that will never be a problem. If your content IS tabvular data then the correct HTML to use is a table not a series of divs - your content is tabular data so the HTML is wrong.

    If the content wasn't tabular fdata then you would use divs or possibly lists but if that were the case then you would still be using the completely wrong CSS. You'd need to get rid of the position:absolute, the left: and the top: as they will break the page layout at some viewport sizes. You should only ever use position:absolute for overlapping elements inside a position:relative or where the left and top are being set by JavaScript.

    To get your table type layout using CSS use display:table, display:table-row and display:table-cell. Of course you'd only use this if it were non-tabular data where a grid layout is required.

    Note also that you don't need to repeat the entire CSS to apply it to different elements, simply list the ids as a comma separated list and then apply the common styles to all of them at once.

    For the actual data you have your HTML is incorrect - semantically that content should be in a table.
    Last edited by felgall; 06-12-2013 at 10:33 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    396
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Actually it is not so much tabular data as it is lists. I would use ul and li to build the structure which simplifies the CSS, makes it more semantically correct, and is cleaner to code.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

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