Problem with Nested Tables

Page 1 of 1

4 Replies - 517 Views - Last Post: 08 October 2012 - 06:41 PM

#1 Thankless Noodle  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 30-March 12

Problem with Nested Tables

Posted 08 October 2012 - 09:23 AM

I'm having trouble with a nested table and I can't seem to figure out how to get the nested table to expand the entire width of it's parent table.It's basically suppose to be 3 columns and 2 rows, with the nested table being between the first and second row, with 2 columns and 2 rows.

Needless to say it's pretty ugly looking and I can't seem to figure out nested tables. Tables themselves are easy, but not this way. Could someone explain to me what I'm doing wrong or even point me to something that helped you?

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Vertical Home Page</title>
		<meta charset="utf-8">
		<link href="tables.css" rel="stylesheet" />
	</head>
        <style>
        #newTable{
	          width: 350px;	
        }
        #newTable td {
	          height: 75px;
	          border-collapse: 1px;
        }
        </style>
	<body>
            
    	<!-- This nested table I just couldn't figure out for the life of me -->
		
		<h2>5) &ndash; Nested Table</h2>
        	<table id="newTable">
				<tr>
					<td>1</td>
					<td>1</td>
                    <td>1</td>
				</tr>
				<tr>
					<td colspan="2">
                    	<table id="nestedTable">
                        	<tr>
                            	<td></td>
                                <td></td>
                            </tr>
                            <tr>
                            	<td></td>
                                <td></td>
                            </tr>
                       	</table>
                    </td>
				</tr>
				<tr>
					<td>2</td>
                    <td>2</td>
                    <td>2</td>
				</tr>
			</table>
		<br />
	</body>

</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Problem with Nested Tables

#2 NathanMullenax  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 81
  • View blog
  • Posts: 176
  • Joined: 23-September 12

Re: Problem with Nested Tables

Posted 08 October 2012 - 02:14 PM

Shouldn't the cell containing the table be:

<td colspan="3" rowspan="2"> <!--- table here ---> </td>
?

That is, if you want it take up the whole width of the parent table rather than the width of the parent cells, it should have a colspan that matches the number of columns in the parent table (ie., 3).

Also, there should be a CSS rule for the nestedTable id:

#nestedTable { width: 100%; }

Was This Post Helpful? 0
  • +
  • -

#3 Thankless Noodle  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 15
  • Joined: 30-March 12

Re: Problem with Nested Tables

Posted 08 October 2012 - 05:54 PM

Well that does seem to get me a bit closer, but the nested table does not seem to span all columns.
Here is a mock up of what I'm trying to achieve: Nested Mockup

I don't want it flat out done for me, because that doesn't do me any good. I just need to understand how to get my nested table to span ALL columns (or simply look like the mock up).


<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Vertical Home Page</title>
		<meta charset="utf-8">
		<link href="tables.css" rel="stylesheet" />
        <style>
			table {
				height: 150px;
				width: 150px;
				border: 1px solid black;
			}
			td {
				border: 1px solid #000;
			}
			#newTable{
				width: 350px;
				border-collapse: inherit;	
			}
			#newTable td {
				width: 100%;
				height: 75px;	
			}
	</style>
	</head>
    
	<body>
            
    	<!-- This nested table I just couldn't figure out for the life of me -->
		
		<h2>5) &ndash; Nested Table</h2>
        	<table id="newTable">
				<tr>
					<td>1</td>
					<td>1</td>
                    <td>1</td>
				</tr>
				<tr>
					<td>
                    	<table id="nestedTable">
                        	<tr>
                            	<td>1</td>
                                <td>1</td>
                            </tr>
                            <tr>
                            	<td>2</td>
                                <td>2</td>
                            </tr>
                       	</table>
                    </td>
				</tr>
				<tr>
					<td>2</td>
                    <td>2</td>
                    <td>2</td>
				</tr>
			</table>
		<br />
	</body>
</html>


Apparently there is no edit (or I simply missed it) on here...

I did try to add the attribute to the <td> tag, but that seemed to make it worse.
Was This Post Helpful? 0
  • +
  • -

#4 NathanMullenax  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 81
  • View blog
  • Posts: 176
  • Joined: 23-September 12

Re: Problem with Nested Tables

Posted 08 October 2012 - 06:21 PM

Note: #newTable td matches every single td in the document. There's no way the layout engine can honor that request, since the rule says every td under #newTable (regardless of the table it belongs to) should be 100% width.

Come to think of it, you don't need to use rowspan at all, but you do need colspan="3" on the cell that contains the nested table. Rowspan only really makes sense when you want some of the cells in a particular row to span multiple rows.

The first table rule is kind of weird. It says tables are universally 150 pixels wide, which is then overridden by the #newTable specification, which says that #newTable is 350 pixels wide. This leaves 350-150 = 200 pixels of space between the size of the nested table and the outer table--I would get rid of that rule altogether.
Was This Post Helpful? 0
  • +
  • -

#5 NathanMullenax  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 81
  • View blog
  • Posts: 176
  • Joined: 23-September 12

Re: Problem with Nested Tables

Posted 08 October 2012 - 06:41 PM

Here's a demonstration of how colspan works:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Colspan Demo</title>
		<meta charset="utf-8">
        <style>
            td {
                border: solid black 1px;
                
            }
        </style>
	</style>
	</head>
    
	<body>
		
		<h2>colspan attribute</h2>
        <table>
            <tr>
                <td colspan="4">
                    colspan=4
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    colspan=2
                </td>
                <td>
                    colspan=1
                </td>
                <td>
                    colspan=1
                </td>
            </tr>
            <tr>
                <td>colspan=1</td>
                <td colspan="3">
                    colspan=3
                </td>
            </tr>
            <tr>
                <td>colspan=1</td>
                <td>colspan=1</td>
                <td>colspan=1</td>
                <td>colspan=1</td>
            </tr>
        </table>
     
	</body>
</html>


The CSS direct descendant selector '>' will probably also be useful.

This rule says 'all cells directly within a row with the id of row5':

tr#row5>td { /* style */ }


As opposed to this one, which specifies all cells within a row with the id of row5.

tr#row5 td { /* style */ }


Note that in the second rule, the td elements could be within a nested table within #row5.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1