Emulating a table with css

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

56 Replies - 5767 Views - Last Post: 19 August 2010 - 05:47 PM

#1 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,145
  • Joined: 08-August 08

Emulating a table with css

Posted 12 August 2010 - 09:03 AM

I'm trying to use css to display a table because the world's worst browser (IE) will not alter individual cells of an html table with javascript. The problem is that if I use absolute positioning for my divs they end up on top of one another and if I use relative they fall below each other.
There are plenty of examples of how to do this with fixed heights, but I want the div heights to adjust to the height of the "highest" one in the container.

css:
@charset "UTF-8";
/* CSS Document */

body {
	margin: 0 auto;
	padding: 0;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	background-color: #dddddd;
}

.articles {
	position: relative;
	top: 0px;
	left: 0px;
	width:500px;
	background: grey;
}

.title {
	position: relative;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 100%;
	background: green;
}

.Auth {
	position: relative;
	top: 0px;
	left: 200px;
	width: 200px;
	height: 100%;
	background: red;
}

.CoAuth {
	position: relative;
	top: 0px;
	left: 200px;
	width: 200px;
	height: 100%;
	background: yellow;
}


html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<link href="Styles/test.css" rel="stylesheet" type="text/css" />
</head>
<body 

<div class="articles">
<div class="title">PHPTITLE</div><div class="Auth">PHPAUTH<br><br>testing</div><div class="CoAuth">PHPCOAUTH</div>
</div>

<div class="articles">
<div class="title">PHPITLEBBBBBBBB</div><div class="Auth">PHPnewAUTH<br><br>testing<br>testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing </div><div class="CoAuth">PHPCOAUTHone</div>
</div>

<div class="articles">
<div class="title">PHPTITLECCCCCCCC</div><div class="Auth">PHPnewAUTH<br><br>testing<br>testing testing testing testing<br><br>testing testing testing testing testing testing testing testing testing testing testing testing </div><div class="CoAuth">PHPCOAUTHtwo</div>
</div>

</body>
</html>

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: Emulating a table with css

#2 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Emulating a table with css

Posted 12 August 2010 - 10:03 AM

Honestly tables are probably your best bet as far as this is concerned, just use selectors based on classes or something as such. I would mention CSS tables but seeing as you're concerned about IE I won't put that nightmare trip by you in detail.
Was This Post Helpful? 0
  • +
  • -

#3 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,145
  • Joined: 08-August 08

Re: Emulating a table with css

Posted 12 August 2010 - 10:07 AM

I was afraid of that! Thanks though.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3525
  • View blog
  • Posts: 10,170
  • Joined: 08-June 10

Re: Emulating a table with css

Posted 12 August 2010 - 03:05 PM

View PostCTphpnwb, on 12 August 2010 - 04:03 PM, said:

I'm trying to use css to display a table because the world's worst browser (IE) will not alter individual cells of an html table with javascript.


IE does alter individual table cells, just not with .innerHTML. you would have to use DOM methods.
Was This Post Helpful? 0
  • +
  • -

#5 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,145
  • Joined: 08-August 08

Re: Emulating a table with css

Posted 12 August 2010 - 03:56 PM

That's as good as not doing it. Writing one method for IE and one for everyone else is more than a bit old and tired. I'm really leaning towards detecting IE and popping up a message to users urging them to upgrade to a modern browser.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3525
  • View blog
  • Posts: 10,170
  • Joined: 08-June 10

Re: Emulating a table with css

Posted 12 August 2010 - 10:49 PM

View PostCTphpnwb, on 12 August 2010 - 10:56 PM, said:

That's as good as not doing it. Writing one method for IE and one for everyone else is more than a bit old and tired.


But that’s what you do all the time to get your code running in IE …
Was This Post Helpful? 0
  • +
  • -

#7 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Emulating a table with css

Posted 13 August 2010 - 05:07 AM

You may find things a lot easier if you don't think in tables. Why this was originally in a table is beyond me but I assume it's old code.
Was This Post Helpful? 0
  • +
  • -

#8 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Emulating a table with css

Posted 13 August 2010 - 10:26 AM

...Tabular data is best displayed in what medium? TABLES. In its proper use it's not old code mate.
Was This Post Helpful? 1
  • +
  • -

#9 mhollis  Icon User is offline

  • D.I.C Head

Reputation: 16
  • View blog
  • Posts: 61
  • Joined: 10-April 10

Re: Emulating a table with css

Posted 13 August 2010 - 01:50 PM

You can (and should) set styles for tables using css. That takes a lot of code out of your HTML page and taking in-line styles out of HTML is what css is all about.

What this results in is faster page loads and browsers that maintain styles in memory so that pages won't have to load styles with the page.

The other result of this is that the actual content of the page is revealed faster to screen readers (for the blind) and also to web crawlers.

Tables are really useful for tabular data and also for forms and <div> formatting cannot entirely replace that. But the old way of using tables to define an entire website is best replaced by <div> tags.

Those <div> tags as well as tables, their cells and the text inside them should be styled in css.
Was This Post Helpful? 0
  • +
  • -

#10 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Emulating a table with css

Posted 13 August 2010 - 02:12 PM

View PostLemur, on 13 August 2010 - 10:26 AM, said:

...Tabular data is best displayed in what medium? TABLES. In its proper use it's not old code mate.

I don't see any tabular data. Specifically, the divs have a class of "articles".

This post has been edited by drhowarddrfine: 13 August 2010 - 02:14 PM

Was This Post Helpful? -1
  • +
  • -

#11 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,145
  • Joined: 08-August 08

Re: Emulating a table with css

Posted 14 August 2010 - 04:20 AM

Well, anything stored in a MySQL database is tabular data. It's all rows and columns! I hadn't thought of displaying this info another way, but I suppose I should. This is why I prefer to leave the front-end stuff to others... the layout is too subjective and tedious for my tastes.
Was This Post Helpful? 0
  • +
  • -

#12 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Emulating a table with css

Posted 14 August 2010 - 06:04 AM

View PostCTphpnwb, on 14 August 2010 - 04:20 AM, said:

Well, anything stored in a MySQL database is tabular data. It's all rows and columns!
How something is stored is no indication of what is stored. Each section is nothing but a title, an article and a citation for a second author. Not tabular data. In HTML5, this would be written thus:
<article>
<h1>Title</h1>
<p>Stuff</p>
<footer>Co-author</footer>
</article>


Repeat
Was This Post Helpful? -1
  • +
  • -

#13 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2934
  • View blog
  • Posts: 10,145
  • Joined: 08-August 08

Re: Emulating a table with css

Posted 14 August 2010 - 06:36 AM

I'd like to know just what data you think would be tabular! It seems to me that quantity is more important than what you're showing. If I want to show a dozen or more of these, tabular is the only way I know to do it. If I show only a few then your method makes sense.
Was This Post Helpful? 0
  • +
  • -

#14 drhowarddrfine  Icon User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Emulating a table with css

Posted 14 August 2010 - 10:12 AM

View PostCTphpnwb, on 14 August 2010 - 06:36 AM, said:

I'd like to know just what data you think would be tabular!
The point is, it's definitely not data. It's a series of articles, like a newspaper or forum. Tables are not necessary and he's not presenting data. How much he's showing is not important either.

Quote

If I want to show a dozen or more of these, tabular is the only way I know to do it. If I show only a few then your method makes sense.

When one writes a book, he puts the text into paragraphs and chapters, he does not put it into tables.
Was This Post Helpful? -1
  • +
  • -

#15 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,425
  • Joined: 28-November 09

Re: Emulating a table with css

Posted 14 August 2010 - 02:53 PM

Really people... Tables have their use in tabular data, ESPECIALLY SQL OUTPUT. There doesn't need to be something else used because you'd be patching together come CSS frankenstein to emulate tables.

I wrote an entire article over why not to use tables, I'm fairly sure what the correct use is.

Anything is data that is information that can be used, stats, summaries, etc.

If we're talking wordpress like blog then go for it, but if this is SQL output then a summary or equivalent is a common thing.

HTML 5 isn't supported practically at all in IE, NO. What is it, IE 9 beta that supports maybe 2-3 tags if that? HTML 5 should be used minimally if at all at this point, considering full adoption and standardization is set at 2022. Bad idea.

If we're talking the backend and seeing which articles there are with summaries tables are correct. Front end should be presented in a blog-like format.
Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »