Nesting a css table inside a fairly wonky html table

Hello everyone. I’m new, so please pardon any missteps.

I’m pretty good with html and css – but without bells and whistles. No flash, for example. Right now I’m working with software designed by someone else. It’s called “the next generation” (TNG) of genealogy software, and it is in fact head and shoulders above most other programs out there. But it’s not flawless. Styling and css are especially fraught with problems.

I don’t have time, energy or expertise enough to convert even part of TNG to all css (and I’m not even sure that’s a good idea), but I do want to use the program. Here’s the biggest problem I’ve run into so far (I have read through the faq and best practices here and elsewhere, and also posted on the TNG forum, but got no response). There’s a lot of tabular data in genealogy, no surprise. TNG is developing ways to deal with display of such data at a pretty good rate, but it’s mostly volunteers and you know how that goes. So I needed to set up a table format to display specific information from the 1900 census. I put together a css table and inserted it into a cell of the larger html table where all the data is pulled from the database.

It wasn’t clear to me (and still isn’t) if it’s kosher to put a css table inside an html table, but it seems to work – almost. You can see the problem here if you scroll to the bottom of the page. You’ll see two css tables (rudimentary formatting for the time being). You’ll also note the HUGE amount of space above and below the tables.

I went over the css carefully and I can’t see any reason for these margins (padding?) – but clearly, I’m missing something.

Also, I am aware that the page as a whole doesn’t validate but there isn’t much I can do about that. It may be that the css table just won’t work in this larger matrix of trouble, in which case, I would love to just hear that much. If there’s a simple solution (something to do with relative placement?) I would love to hear that even more.

One last thing: these tables are not all the same size. The one you see on that page is for the 1900 census. Each year is different.

So, there it is. Any advice or direction much appreciated.

rlgreen

Hi rlgreen. Welcome to the forums. :slight_smile:

Gee, this sounds like a bit of a mess. Are you sure this tool is worth it? Why not just write your own HTML as you want?

Edit:

Ah, sorry, I see it’s a CMS for a particular purpose. Are there other genealogy CMSes?

Anyhow, that link you gave leads to a login page. I’m assuming that’s not the page you are referring to.

Ralph – thank you for the reply. That was dopey of me – you can log in using the login name:
visitor
and the pw:
visitor

Genealogy software is generally pretty messy, I’m afraid. There are individual programs who do a couple things very well, but no one program that has a handle on all the basics. This one is pretty good, in comparison.

If you have any suggestions re my css tables, I would much appreciate your input.

In terms of the large space above the table, there are lots of <br> elements here:

<td valign="top" class="databack"><span class="normal"><a href="showmedia.php?mediaID=1961&amp;medialinkID=1111">1900 Bick Hermann and Helene household, Chicago Ward 25,  Cook,  Illinois; Roll:  275; Page:  2B; Enumeration District:  750</a>[COLOR="#FF0000"]<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>[/COLOR]<table class="table" id="census1900us" cellspacing="0" cellpadding="0">
	<tbody><tr class="rowa">

I’m not quite sue where the ‘CSS table’ is, though.

You are quick.

Okay, I see all those breaks, which were generated by the software, I guess. The two css tables are way at the bottom of that cell. I’m going to go look to see if there’s a way to get rid of those breaks.

Thanks so much for looking at it.

Ralph – here’s the way I put the css tables together. I’m still trying to track down those breaks.

<table class="table" id="census1900us" cellspacing="0" cellpadding="0">
	<tr class="rowa">
		<td class="col1 cell">NAME</td>
		<td class="col2 cell">Herman Bjick</td>
		<td class="col3 cell">Helen Bjick</td>
		<td class="col4 cell">Alexander</td>
		<td class="col5 cell">Lillian</td>
		<td class="col6 cell">Herbert</td>
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">AGE</td>
		<td class="col2 cell">45</td>
	<td class="col3 cell">34</td>
		<td class="col4 cell">10</td>
		<td class="col5 cell">8</td>
		<td class="col6 cell">6</td>
		
	</tr>
 	<tr class="rowa">
 	<td class="col1 cell">BIRTH <br />DATE</td>
		<td class="col2 cell">Jun 1854</td>
		<td class="col3 cell">Feb 1866</td>
		<td class="col4 cell">Apr 1890</td>
		<td class="col5 cell">Feb 1892</td>
		<td class="col6 cell">Jun 1893</td>
		
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">BIRTH <b />PLACE </td>
		<td class="col2 cell">Germany </td>
		<td class="col3 cell">Germany</td>
		<td class="col4 cell">Chicago Cook IL </td>
		<td class="col5 cell">Chicago Cook IL</td>
		<td class="col6 cell">Chicago Cook IL</td>
		
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">RESIDENCE</td>
		<td class="col2 cell">Chicago Ward 25 Cook IL</td>
		<td class="col3 cell">Chicago Ward 25 Cook IL</td>
		<td class="col4 cell">Chicago Ward 25 Cook IL</td>
		<td class="col5 cell">Chicago Ward 25 Cook IL</td>
		<td class="col6 cell">Chicago Ward 25 Cook IL</td>
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">RACE</td>
		<td class="col2 cell">white</td>
		<td class="col3 cell">white</td>
		<td class="col4 cell">white</td>
		<td class="col5 cell">white</td>
		<td class="col6 cell">white</td>
		
		
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">GENDER</td>
		<td class="col2 cell">male</td>
		<td class="col3 cell">female</td>
		<td class="col4 cell">male</td>
		<td class="col5 cell">female</td>
		<td class="col6 cell">male</td>
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">IMMIGR</td>
		<td class="col2 cell">1863</td>
		<td class="col3 cell">?</td>
		<td class="col4 cell">--</td>
		<td class="col5 cell">--</td>
		<td class="col6 cell">--</td>
		
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">RELATION</td>
		<td class="col2 cell">self</td>
		<td class="col3 cell">wife</td>
		<td class="col4 cell">son</td>
		<td class="col5 cell">daughter</td>
		<td class="col6 cell">son</td>
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">MARITAL</td>
		<td class="col2 cell">married</td>
		<td class="col3 cell">married</td>
		<td class="col4 cell">--</td>
		<td class="col5 cell">--</td>
		<td class="col6 cell">--</td>
		
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">SPOUSE</td>
		<td class="col2 cell">Helen Bjick</td>
		<td class="col3 cell">Herman Bjick</td>
		<td class="col4 cell">--</td>
		<td class="col5 cell">--</td>
		<td class="col6 cell">--</td>
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">YEAR </td>
		<td class="col2 cell">1886</td>
		<td class="col3 cell">1886</td>
		<td class="col4 cell">--</td>
		<td class="col5 cell">--</td>
		<td class="col6 cell">--</td>
		
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">FATHER BP</td>
		<td class="col2 cell">Germany</td>
		<td class="col3 cell">Germany</td>
		<td class="col4 cell">Germany</td>
		<td class="col5 cell">Germany</td>
		<td class="col6 cell">Germany</td>
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">MOTHER BP</td>
		<td class="col2 cell">Germany</td>
		<td class="col3 cell">Germany</td>
		<td class="col4 cell">Germany</td>
		<td class="col5 cell">Germany</td>
		<td class="col6 cell">Germany</td>
		
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">OCCUPATION</td>
		<td class="col2 cell">?</td>
		<td class="col3 cell">housewife</td>
		<td class="col4 cell"></td>
		<td class="col5 cell"></td>
		<td class="col6 cell"></td>
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell"></td>
		<td class="col2 cell"></td>
		<td class="col3 cell"></td>
		<td class="col4 cell"></td>
		<td class="col5 cell"></td>
		<td class="col6 cell"></td>
		
	</tr>
 </table>


</head>
<body>
<table class="table" id="census1900us" cellspacing="0" cellpadding="0">
	<tr class="rowa">
		<td class="col1 cell">NAME</td>
		
		<td class="col7 cell">Carl</td>
		<td class="col8 cell">Helen </td>
		<td class="col9 cell">Reuben</td>
		<td class="col10 cell">L William </td>
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">AGE</td>
		
		<td class="col7 cell">5</td>
		<td class="col8 cell">3</td>
		<td class="col9 cell">1</td>
	<td class="col10 cell">19</td>
	</tr>
 	<tr class="rowa">
 	<td class="col1 cell">BIRTH <br />DATE</td>
		
		<td class="col7 cell">Jan 1895</td>
		<td class="col8 cell">Dec 1896</td>
		<td class="col9 cell">Sep 1900</td>
		<td class="col10 cell">Oct 1903</td>
		
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">BIRTH <b />PLACE </td>
		
		<td class="col7 cell">Chicago Cook IL</td>
		<td class="col8 cell">Chicago Cook IL</td>
		<td class="col9 cell">Chicago Cook IL</td>
		<td class="col10 cell">?check</td>
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">RESIDENCE</td>
		
		<td class="col7 cell">Chicago Ward 25 Cook IL</td>
		<td class="col8 cell">Chicago Ward 25 Cook IL</td>
		<td class="col9 cell">Chicago Ward 25 Cook IL</td>
		<td class="col10 cell">Chicago Ward 25 Cook IL</td>
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">RACE</td>
		<td class="col7 cell">white</td>
		<td class="col8 cell">white</td>
		<td class="col9 cell">white</td>
		<td class="col10 cell">white</td>
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">GENDER</td>
				<td class="col7 cell">male</td>
		<td class="col8 cell">female</td>
		<td class="col9 cell">male</td>
		<td class="col10 cell">male</td>
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">IMMIGR</td>
		<td class="col7 cell">--</td>
		<td class="col8 cell">--</td>
		<td class="col9 cell">?</td>
		<td class="col10 cell"></td>
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">RELATION</td>
		
		<td class="col7 cell">son</td>
		<td class="col8 cell">daughter</td>
		<td class="col9 cell">son</td>
		<td class="col10 cell">?</td>
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">MARITAL</td>
		
		<td class="col7 cell">--</td>
		<td class="col8 cell">--</td>
		<td class="col9 cell">--</td>
		<td class="col10 cell">--</td>
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">SPOUSE</td>
		=
		<td class="col7 cell">--</td>
		<td class="col8 cell">--</td>
		<td class="col9 cell">--</td>
		<td class="col10 cell">--</td>
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">YEAR </td>
		
		<td class="col7 cell">--</td>
		<td class="col8 cell">--</td>
		<td class="col9 cell">--</td>
		<td class="col10 cell">--</td>
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">FATHER BP</td>
		
		<td class="col7 cell">Germany</td>
		<td class="col8 cell">Germany</td>
		<td class="col9 cell">Germany</td>
		<td class="col10 cell">Germany</td>
	</tr>
 	<tr class="rowb">
		<td class="col1 cell">MOTHER BP</td>
		
		<td class="col7 cell">Germany</td>
		<td class="col8 cell">Germany</td>
		<td class="col9 cell">Germany</td>
		<td class="col10 cell">Germany</td>
	</tr>
 	<tr class="rowa">
		<td class="col1 cell">OCCUPATION</td>
		
		<td class="col7 cell"></td>
		<td class="col8 cell"></td>
		<td class="col9 cell"></td>
		<td class="col10 cell">?</td>
	</tr>
 	<tr class="rowb">
		<td class="col1 cell"></td>
	
		<td class="col7 cell"></td>
		<td class="col8 cell"></td>
		<td class="col9 cell"></td>
		<td class="col10 cell"></td>
	</tr>
 </table>


Ah, I think you are using the wrong term here, but not sure why. What you’ve posted above is an HTML table, not a CSS table. CSS is just about styling content, and there is a CSS option that allows for table-like layout (display: table)—but that’s not really of use here. It’s fine to nest one HTML table inside another, though.

Watch out for the </head> tag here:

</table>

[COLOR="#FF0000"]</head>[/COLOR]

That could really mess up your code. That only belongs just before the <body> tag.

Crickey, did I put an extra end-head code in there? I’m off to look. Thanks for your sharp eyes. And yes, I meant an html table that is handled exclusively by css. No table structure. I’m not sure what else to call it.

I’m not really sure what you mean by that. An HTML table has a table structure. You can instead style divs (or other elements) to arrange themselves like a table with CSS, but it’s not a good idea for what you are doing, as it’s really tabular data, by the look of it.

If you can’t remove them manually then as a last ditch effort you could do something like this:


.notearea li br{display:none}
.notearea li table br{display:block}

However, there must be a reason why you have so many breaks in there so removing them at source would be the desired approach.

Paul – That is a neat trick, thank you. But of course you’re right about the breaks. I’ll keep digging. Thanks again.