Solved

CSS equivalent to basic html table properties

Posted on 2008-10-03
8
975 Views
Last Modified: 2013-11-19
I can't believe I cannot figure this out or even find it on the vast Internet.  But my question should be simple:

How can I recreate the following table using css styles instead of the table element properties.  I can get close, but cannot get it perfect.  

Thanks!
<table border="10" cellspacing="10" cellpadding="10">
  <tr>
    <td>This</td>
    <td>is</td>
  </tr>
  <tr>
    <td>pretty</td>
    <td>basic</td>
  </tr>
</table>

Open in new window

basictable.jpg
0
Comment
Question by:dban00b
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22634069

<table width="300" cellspacing="10">
      <tr>
            <td>asdf</td>
            <td>asdf</td>
      </tr>
      <tr>
            <td>sadf</td>
            <td>asdf</td>
      </tr>
</table>
 
 
<style type="text/css">
<!--
table {
	border: 10px outset #999999;
}
table td {
	border: 1px solid #999999;
	padding: 10px;
}
-->
</style>

Open in new window

0
 
LVL 7

Accepted Solution

by:
Brad Dobyns, CSM earned 500 total points
ID: 22634121
Try this for tableless design:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Untitled</title>
	<style type="text/css">
		.tablediv {
			display: table;
			width: 500px;
			background-color: #eee;
			border-top: 10px outset #666666;
			border-right: 10px outset #666666;
			border-spacing: 10px; /*cellspacing:poor IE support for this*/
			border-collapse: separate;
		}
		.celldiv {
			float: left; /*fix for buggy browsers*/
			display: table-cell;
			border-left: 10px outset #666666;
			border-bottom: 10px outset #666666;
			width: 50%;
			background-color: #ccc;
			text-align: center;
		}
		.rowdiv  {
			display: table-row;
			width: auto;
		}
	</style>
</head>
<body>
<div class="tablediv">
	<div class="rowdiv">
		<div class="celldiv">one cell of content in a table</div>
		<div class="celldiv">one cell of content in a  table</div>
	</div>
	<div class="rowdiv">
		<div class="celldiv">one cell of content in a table</div>
		<div class="celldiv">one cell of content in a  table</div>
	</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 29

Expert Comment

by:Badotz
ID: 22634462
This page of Quirksmode talks about the "display" property, including "display:table-cell" and others. It might help you in your quest to be rid of tables:

http://www.quirksmode.org/css/display.html
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 22635236
Did that work for you?
0
 
LVL 1

Author Closing Comment

by:dban00b
ID: 31502758
Thanks!  Your solution didn't produce the exact same results, but it did give me all the information I needed!
0
 
LVL 1

Author Comment

by:dban00b
ID: 22635375
Thanks!

Just like my attempts, those weren't spot-on.  But bdobyns did give me all the style elements I was missing!
Especially these: border-spacing, border-collapse float: left

I am curious though, I always put my styles in the head, and your guys' were in the body.  Any reason why?
 
0
 
LVL 1

Author Comment

by:dban00b
ID: 22635387
Oops--nevermind that last question--Don't know what I was looking at :)
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
ID: 22635421
Thanks for the points. I think they were just doing that to show you the styles. You should ALWAYS (as a matter of standards) put a <style> tag in the head of your HTML document if you are not using a stylesheet. Otherwise, you could use inline styles by using the style="" attribute on most tags.

Thanks,
Brad
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question