LOL such a stupid question - I hate tables. But it’s the best for the data. All the tables are a fixed width. Each table should have a full width header. Each table has a varying amount of horizontal rows. Each row has varying amount of cells.
Whats the best way to make the cells distribute evenly across each row? for instance one row each cell will need to be 50% width cuz there is only two. The next each cell may need to be 33.33% because there are 3. And so on.
I couldn’t seem to get colspan to work. Currently the only way to do it without much fuss I have found is to put each row in it’s own table. But surely this is not correct??
<table>
<tr><th>OWNER #1 INFORMATION</th></tr>
</table>
<table>
<tr><td>First Name:</td><td>Middle Name:</td><td>Last Name:</td></tr>
</table>
<table>
<tr><td>Name of LLC or LLP (If Applicable):</td></tr>
</table>
Given what you’ve posted, I’m not convinced of that. Tables are for associating data in columns and rows. Seems here you are just presenting a form of some kind, in which case divs and headings would be a lot easier to work with.
Let me try this again. As others have said, it’s not easy to tell exactly what you want to do. Hopefully, there will be something useful in these examples. They seem to work. For these demos, each row is an independent nested table.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nested tables, same width</title>
<!--
There are no colspans here, just independent nested tables.
-->
<style type="text/css">
.htmltable {margin:0 auto;}
.htmltable table {width:100%;}
td {outline:1px solid magenta;}
.pct50 {
width:50%;
}
.outer {
display:table;
border-spacing:2px 2px;
margin:0 auto;
}
.nested {
display:table;
width:100%;
margin:0 auto;
}
.tcell {
display:table-cell;
vertical-align:middle;
outline:1px solid magenta;
padding:1px;
}
</style>
</head>
<body>
<table class="htmltable">
<thead>
<tr>
<td>
<table>
<thead>
<tr>
<td>This is a line of text.</td>
<td>This is a line of text.</td>
<td>This is a line of text.</td>
</tr>
</thead>
</table>
<table>
<thead>
<tr>
<td class="pct50">Yet another line of text.</td>
<td>Yet another line of text.</td>
</tr>
</thead>
</table>
<table>
<thead>
<tr>
<td class="pct50">Yet another line of text.</td>
<td>Yet another line of text. Yet another line of text.</td>
</tr>
</thead>
</table>
<table>
<thead>
<tr>
<td>This is the widest line of text in the world.</td>
</tr>
</thead>
</table>
</td>
</tr>
</thead>
</table>
<br> <!-- for this demo only :) -->
<div class="outer">
<div class="tcell">
<div class="nested">
<div class="tcell">This is a line of text.</div>
<div class="tcell">This is a line of text.</div>
<div class="tcell">This is a line of text.</div>
</div>
<div class="nested">
<div class="tcell pct50">Yet another line of text.</div>
<div class="tcell">Yet another line of text.</div>
</div>
<div class="nested">
<div class="tcell pct50">Yet another line of text.</div>
<div class="tcell">Yet another line of text. Yet another line of text.</div>
</div>
<div class="nested">
<div class="tcell">This is the widest line of text in the world.</div>
</div>
</div>
</div>
</body>
</html>
The colspans required to make that would drive me insane.
But even 10 pages of that would be crazy, can you not just give them a PDF that you made from Word or LibreOffice? I would go that route, since this looks like something they are going to print anyway. A PDF would ensure that the print version looks like what you want.
Honestly, if you 100% absolutely have to do this with HTML… since it’s 10 pages then you might as well just go ahead and use a lightweight Grid Framework.
PureCSS would work well in this case. About 2kb for the base + grid. (Don’t use Responsive)
The thing is… does it exactly have to look like that? I wouldn’t even use divs for that (except for the container) maybe
@PaulOB I like your style but… my only question is… wouldn’t it make more sense to create it as a form and use labels and inputs and paragraphs instead of DIVS
I’m really thinking about usability.
@PicnicTutorials Doesn’t it make more sense that the user fills it online, even if it is just for printing? Of course, it may be more functional if the form could be submitted and the data safe in a database. But even if that’s not the case, it could be good if people could fill it and print it alredy filled in.
If you have a ten page doc for them to complete, it’s the sort of thing the user would do in stages, sitting down with a paper version. They would read it over several times before submitting it. Google has no input to filling in the form. So you simply right a single line that says “To download and complete the ten page form, click here” with the link pointing at the form as a Word doc. So what has google got to do with that?
Drop the html idea, stick with the real world. I would hate to have a ten page on line form to complete. I would prefer to look it over in paper form, looking back and forth between bits I wasn’t sure about and cross checking it.
And once they fill in your html version, what is the next step? Emailing it to you? Think of the hassle in getting a nicely laid out email response. Stick with paper and a Word doc.
The html version is just for google or whomever. Its not going to be fillable online. Therefore no need for inputs and labels and such. I have a fillable pdf thats good enough for now.
Thanks a ton guys for all your suggestions. I’ll try them all out. LOL Paul your awesome. Not only did you give me some nice code but you input all the text for that section. Much obliged. Going to load it up now and see it’s beauty.
Just out of curiosity, why would you need an HTML form for Google? If it’s there in PDF format, Google will return that in search results, in the (probably rather unlikely) unlikely event that your form is a good fit for somebody’s search term.
On the other hand, an HTML form which can be completed online is more accessible for humans - e.g. users of assistive technology - than a download-and-print PDF.
Google will return the results for a pdf yes. Either way google reads html much better. But as far as i know google will index the pdf’s url text, and meta data. I don’t think google reads the pdf. I large bulk of the coolness of the site is the forms I have built. So I figure I mine as well let google see it. I need all the help I can get. Because as of now google hates me.
The box-sizing rule is so that all browsers from IE8 upwards use the box-sizing:border-box model so that padding and borders are on the inside of the dimensions and not on the outside. This allows the width 100% to have padding without stretching out of the box.
I use it as a default for all my sites these days so that I don’t have to worry about it.
It’s only needed in my example for the single row (p.row) and you could if you want just add this rule instead of the box-sizing.
p.row{display:block;width:auto}
Your use of overflow:hidden could cut off content because you are just cutting it short. There are no floats so you don’t need it for float clearing either.
