5 Replies - 4475 Views - Last Post: 19 May 2010 - 12:30 PM

#1 NickDMax  Icon User is offline

  • Can grep dead trees!
  • member icon

Reputation: 2250
  • View blog
  • Posts: 9,245
  • Joined: 18-February 07

Nested Table formatting

Posted 06 May 2010 - 09:10 AM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Nested Table formatting

#2 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Nested Table formatting

Posted 06 May 2010 - 09:34 AM

<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

Was This Post Helpful? 1
  • +
  • -

#3 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: Nested Table formatting

Posted 07 May 2010 - 09:47 AM

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). :)
Was This Post Helpful? 0
  • +
  • -

#4 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: Nested Table formatting

Posted 07 May 2010 - 10:01 AM

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 -->


Was This Post Helpful? 1
  • +
  • -

#5 NickDMax  Icon User is offline

  • Can grep dead trees!
  • member icon

Reputation: 2250
  • View blog
  • Posts: 9,245
  • Joined: 18-February 07

Re: Nested Table formatting

Posted 19 May 2010 - 12:23 PM

View Postjrm402, 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).
Was This Post Helpful? 0
  • +
  • -

#6 revolutionx  Icon User is offline

  • D.I.C Head

Reputation: 60
  • View blog
  • Posts: 229
  • Joined: 23-July 09

Re: Nested Table formatting

Posted 19 May 2010 - 12:30 PM

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

Xhtml should be coded semantically.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1