anyone have a clean tableless table...lol

I am searching for a CSS "table" I guess you would say...anyway, just wondering if anyone has anything nice and clean comprised entirely of CSS divs instead of html tables....would appreciate it....

 

What are the dimensions and properties of the domain you are requesting?

 

firstly you need to be alot more specfic, and if you want an entire css template, you need to head over to the Buy Sell Trade section.
I have Tableless css designs in my deviantart as well, i never code with tables

 

It's more useful to have CSS table work with Javascript. Here's an example

http://www.pagecolumn.com/javascript/ASCII_codes.htm

This concept is still at the beginning. You can see more demos here,
http://www.pagecolumn.com/javascript/js_grid_framework.htm

 

The quesiton gibigbig2 asked plays to may question: What's the data.

If it's tabular data, then you should be using a table... You should not even be TRYING to create a table using div's. In fact tables in many cases are MORE semantic and MORE appropriate assuming you use all the proper tags inside it.

But if it's a LAYOUT of NON-TABULAR data, then by all means use DIV's.

What's the information that's going into this code, and how are you trying to arrange it? Remember the best approach to web design is CONTENT first and semantic markup. (which is why the ****tards who start out in photoshop are a bunch of /FAIL***'s)

 

@gib
will do...thanks

@death
Good advice...I am not a web designer or do I try to be..I am just trying to create a table like set up for a bunch of data, but after reading that comment, I will just use a table instead of css....thanks a lot

 

Not instead of CSS, instead of DIV... You can use CSS on tables as well.

especially if you get elements like CAPTION, THEAD, TBODY, and TH involved. (yes, there are more tags that can be used in a table besides TD and TR)

Lost track of how many times I've seen people do this:

<table cellpadding="0" cellspacing="4" border="0">
	<tr>
		<td colspan="4" bgcolor="#FFCCCC" align="center">
			Table Title
		</td>
	</tr><tr>
		<td style="border:none;"></td>
		<td align="center" bgcolor="#CCFFCC"><b>Col 1</b></td>
		<td align="center" bgcolor="#CCFFCC"><b>Col 2</b></td>
		<td align="center" bgcolor="#CCFFCC"><b>Col 3</b></td>
	</tr><tr>
		<td align="center" bgcolor="#CCCCFF"><b>Row1</b></td>
		<td bgcolor="#FFFFFF">Data 1-1</td>
		<td bgcolor="#FFFFFF">Data 1-2</td>
		<td bgcolor="#FFFFFF">Data 1-3</td>
	</tr><tr>
		<td align="center" bgcolor="#CCCCFF"><b>Row1</b></td>
		<td bgcolor="#FFFFFF">Data 2-1</td>
		<td bgcolor="#FFFFFF">Data 2-2</td>
		<td bgcolor="#FFFFFF">Data 2-3</td>
	</tr><tr>
		<td align="center" bgcolor="#CCCCFF"><b>Row1</b></td>
		<td bgcolor="#FFFFFF">Data 3-1</td>
		<td bgcolor="#FFFFFF">Data 3-2</td>
		<td bgcolor="#FFFFFF">Data 3-3</td>
	</tr>
</table>

Code (markup):

When what they should be doing is this:

<table cellspacing="4">
	<caption>Table Title</caption>
	<thead>
		<tr>
			<th class="null"></th>
			<th>Col 1</th>
			<th>Col 2</th>
			<th>Col 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Row1</th>
			<td>Data 1-1</td>
			<td>Data 1-2</td>
			<td>Data 1-3</td>
		</tr>
		<tr>
			<th>Row2</th>
			<td>Data 2-1</td>
			<td>Data 2-2</td>
			<td>Data 2-3</td>
		</tr>
		<tr>
			<th>Row3</th>
			<td>Data 3-1</td>
			<td>Data 3-2</td>
			<td>Data 3-3</td>
		</tr>
	</tbody>
</table>

Code (markup):

With everything else declared in the CSS thus:

table {
	background:#CCC;
	border-collapse:separate;
	border:1px solid #000;
}

table caption {
	text-align:center;
	padding:4px 0;
	background:#FCC;
	border:solid #000;
	border-width:1px 1px 0;
}

table th,
table td {
	padding:2px 6px;
	border:1px solid #000;
}

table thead th {
	background:#CFC;
}

table tbody th {
	background:#CCF;

}

table td {
	background:#FFF;
}

table .null {
	background:none;
	border:none;
}

Code (markup):

Ends up about the same amount of total code when showing three rows, but show four rows and it's saving you 85 bytes per row... AND you don't have to dick with the styling every time you enter new data... AND the table is more accessable to data scrapers and screen readers since you're marking up the content as what it is, NOT how it appears.

I have a copy of that rendering here:
http://battletech.hopto.org/html_tutorials/tableExample.html

See, THAT is a properly marked up table... A lot of the 'problems' with tables have nothing to do with using them, as much as people not using them properly.