[NickDMax]

Ok, I have had a brain lapse and can't seem to do something simple:

+--------------------------------------+
|............Section.Title.............|
+------------------+-------------------+
|....th1...........|.....th2...........|
+------------------+-------------------+
|....td1...........|.....td2...........|
+--------+---------+-------------------+
|..th3...|......td3....................|
+--------+-----------------------------+

Basically I was trying to do this:

    <table style="width:100%">
    	<tr><th colspan="2">Title</td></tr>
    	<tr>
	    	<td colspan="2" >
			    <table style="width:100%" class="innerTable">
			        <tr><th>th1</th><th>th2</th></tr>
			        <tr><td>td1</td><td>td2</td></tr>
			    </table>
	    	</td>
    	</tr>
    	<tr>
    		<th>th3</th>
    	    <td><a href="#">td3</a></td>
    	</tr>
    </table>

and my styles are

table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}

-- what I really am looking to do is make everything look like one table rather than a nested table (i.e. the border around the inner table collapsing into the outer table).

I used to do this kind of thing all the time... but apparently I forgot how it is done.

[revolutionx]

<style type="text/css">

table{border-collapse:collapse;}

.mainTable { border:1px solid black; margin:0px; padding:0px; }
.mainTable tr th { border-right:1px solid black; }
.innerTable tr { border-top:1px solid black; border-bottom:1px solid black; }
.innerTable tr th, .innerTable tr td { border-right:1px solid black; }
.innerTable tr th.right, .innerTable tr td.right { border:none; } { border:none; }
</style>


<table style="width:100%" class="mainTable">
        <tr><th colspan="2">Title</td></tr>
        <tr>
                <td colspan="2" >
                    <table style="width:100%" class="innerTable">
                        <tr><th>th1</th><th class="right">th2</th></tr>
                        <tr><td>td1</td><td class="right">td2</td></tr>
                    </table>
                </td>
        </tr>
        <tr>
             <th>th3</th>
            <td><a href="#">td3</a></td>
        </tr>
</table>

I think that should be right, unless I mis-understood.

This post has been edited by revolutionx: 06 May 2010 - 09:38 AM

[jrm402]

You could just use one table like so:

<table>
  <tr><th colspan="3">Title</th></tr>
  <tr>
    <td colspan="2">th1</td><td>th2</td>
  </tr>
  <tr>
    <td colspan="2">td1</td><td>td2</td>
  </tr>
  <tr>
    <td>th3</td><td colspan="2">td3</td>
  </tr>
</table>

That would be the non CSS way about it (although you shouldn't be using tables anyways).

[calebjonasson]

I'm just going to throw this out there as an alternative.

.table-container{
    width:500px;
}
.t-row{
    height: 30px;
    clear:both;
}
.t-col1{
    width:100px;
    float:left;
}
.t-col2{
    width:200px;
    float:left;
}
.t-col3{
    width:300px;
    float:left;
}
.t-col4{
    width:400px;
}

Then implement like so:

<div class="table-container">
<div class="t-row">
	<div class="t-col4">section title</div>
		<div class="t-col2">th1</div>
		<div class="t-col2">th2</div>
		<div class="t-col2">td1</div>
		<div class="t-col2">td2</div>
		<div class="t-col1">th3</div>
		<div class="t-col3">td3</div>
	</div><!-- End of t-row -->
</div><!-- End of table-container -->

[NickDMax]

jrm402, on 07 May 2010 - 11:47 AM, said:

That would be the non CSS way about it (although you shouldn't be using tables anyways).

Why is that? I have been out of the loop with HTML for a while (just cutting up stuff design firms give us and feeding to the CMS).

BTW -- in regards to the original question, I ended up going with a different layout of the table, and the customer didn't like it, and so someone else did one and I ended up having to use that... Apparently I am VERY rusty (spend too much time just cutting up HTML design firms generate).

[revolutionx]

Tables should be for tabular data only, and not website layouts.

Xhtml should be coded semantically.