I'm trying to fill in some extra stuff in an already existing table. Only problem is I don't know how to do that without without destroying the whole layout.
The table is constructed in an ordinary fashion:
<table>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
</table
Have tried to illustrate with an image..
How do I implement the extra TH and TD, as seen on the image, while still maintaining the structure and layout?
You can replace the relevant cells by two cells and add colspan=2 to other cells in the same column. In effect, you would break one column to two columns but so that on some rows, one cell spans both columns. You just need to take care of setting the widths of the new cells so that their combined width plus the spacing between them does not exceed the width of the original column.
Related
Currently messing around and have created a form which is being positioned within a table.
I have three columns in my table and two rows.
The top row contains three input elements as you can tell by the picture, and on the second row i have a textarea. The problem i'm having is that i'm trying to change the textarea to a width which matches the three input areas above, but when i try to extend the width, obviously it is forcing the input elements further across as it is in a table.
Can someone tell me a way i can somehow merge the bottom row to allow me to stretch my textarea.
https://dumpyourphoto.com/photo/xIwlb9oqYQ#
The 2nd row should look like this.
<tr><td colspan="3"><textarea></textarea></td></tr>
You merge the table cells.
Instead of:
<tr>
<td>
<textarea></textarea>
</td>
<td></td>
<td></td>
</tr>
You have to write:
<tr>
<td colspan="3">
<textarea></textarea>
</td>
</tr>
I have a table that is being generated by means of a loop.
Each loop creates 2 rows of the table.
What I want to achieve is when this page is printed the the 2 rows created in each loop iteration stay together and do not get split over a page boundary.
I have tried applying the CSS rule {page-break-inside: avoid;} on both the tr and td elements with not much luck (I hear this is an known issue with non-block elements).
Apart from rebuilding the view using divs, is there a solution that I can apply to the table?
You need to combine these two styles together (although auto is the default value)
if those two rows are supposed to attach together, you might consider using a single table for each of those two rows instead of having a single table for all rows.
{page-break-inside: avoid;page-break-before:auto}
Also check comments for this answer
The discovery of the styles page-break-inside: avoid; page-break-before: auto was very useful to me when looking for a way to do exactly this. However, I found a way of making it work without having to use separate tables. Wrap each set of rows that you want to keep together in a <tbody> element, and give that element the two styles that control page breaks. As far as I can tell, that has exactly the desired effect: if the printed document is split across multiple pages, the rows within each <tbody> element will always appear on the same page.
Unfortunately CSS page break properties are not always reliable across all browsers and platforms.
For a more sure-fire approach, as AaA mentions, I find it better to wrap the rows that you don't want split into a table of their own.
Like so:
<table>
<thead>
//headers
</thead>
<tbody>
<tr> //Create your for loop on this element
<td>
<table>
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Each table can be more reliably kept together as needed, and the table can have as many rows and columns needed.
I want to space the headers above the form unevenly on one line and not really sure what the best way to do this using HTML and CSS. I have used span tags and padding in the past but this works differently in different browsers and does not line up correctly. Im sure there is a better way then wrapping all of the headers in span tags. Thanks so much for your help. I have attached an image of what I would like to achieve.
If you use a table, the cells will auto size to the content in them. Tables are still useful when dealing purely with tabular data. Alternatively, you can assign a class to each header cell to set specific widths.
<table cellpadding="5" cellspacing="5" width="100%">
<tr>
<td>one</td>
<td>this one needs more space and will grow</td>
<td>this guy isn't as long</td>
<td>short</td>
</tr>
Example on JSFiddle: http://jsfiddle.net/JdSy2/
I have a table according to below. The second row has defined three columns, one with colspan=8 and the others with colspan=1. Still, the cells are not stretched according to the colspan, the "width" are a little bit more for second cell and widest for the third.
<table class="floating simpletable">
<tbody>
<tr><td colspan="10">1st row</td></tr>
<tr><td colspan="8">Column 1 -> Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr>
<tr><td colspan="10">3rd row</td></tr>
<tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr>
</tbody>
</table>
What's the problem and how to fix it?
The widths of cells depend on cell contents, HTML and CSS settings for widths, browser, and possibly phase of the moon. The colspan attribute just specifies how many columns (hence, how many slots in the grid for the table) a cell occupies.
If you see the last cell of row 2 as the widest, then the reason is probably that it has most contents (or there is a width setting for it). Your demo code does not demonstrate such behavior.
If you don’t want the column widths adjust to the size requirements of cells, set the widths explicitly in CSS (or in HTML). Before this, it is best to remove all unnecessary complications from the table structure. If your demo code reflects the entire structure, then columns 2 through 8 are an unnecessary division, i.e. they could be turned to a single column. Demonstration (with poor-style pixel widths just for definiteness):
<table class="floating simpletable" border>
<col width=100><col width=100><col width=100>
<tbody>
<tr><td colspan="4">1st row</td></tr>
<tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr>
<tr><td colspan="4">3rd row</td></tr>
<tr><td>span</td><td colspan="3">other span</td></tr>
</tbody>
</table>
Without a rewrite like this, I’m afraid your table violates the table model of HTML, as currently there is no cell that starts in column 3 or column 4 or...
colspan determines how many columns a cell overlaps, not the size of those columns. Use the CSS width property to specify the width of things.
Only display: table-cell implements the behavior for colspan, so applying any other display value would cause the attribute to be ignored.
If you want to use some other display algorithm for the content of a cell you could use a wrapper:
<td colspan="2"> <!-- the cell is still `display: table-cell` -->
<div style="display: grid"> <!-- the wrapper can have any `display` rule you need -->
<!-- the cell content -->
</div>
</td>
I would like to ask what is the better way of specifying HTML column width? the width attribute or the style attribute? Assuming I am using IE 6. Does IE render the width attribute better than style?
By width attribute
<table width="900">
<tr>
<td width="450">A</td>
<td colspan="2" width="450">B&C</td>
</tr>
....
</table>
OR by style attribute
<table style="width:900px;">
<tr>
<td style="width: 450px;">A</td>
<td colspan="2" style="width: 450px;">B&C</td>
</tr>
....
</table>
Firstly before I answer your question, something you should know is how tables are rendered, experiment with the table-layout fixed style for the table element:
If the browser knows the width of the first table row columns upfront (if you provide the table layout fixed style on the table) the browser can begin rendering the top of the table even before its calculated the width of any resulting rows. What this means? Tables populated by Ajax calls with a fixed layout can begin displaying results to a user before the full ajax call is finished. Best way to think of this is like a progressive jpg. In the end your pages will appear to load faster.
table
{
table-layout:fixed;
}
Now to answer your question.
Actually neither example you provided is correct. you typically do not set width on a cell that is spanned across 2 or more cells. In any table its a good idea to create at least 1 row with all the cells, this can either be in the TH or (just the way I like to do it in a blank tr.
For example...
<table>
<tr>
<td width="450"></td>
<td width="225"></td>
<td width="225"></td>
</tr>
<tr>
<td>content here</td>
<td colspan="2">content here</td>
</tr>
</table>
What ever way you decide to use style or just standard html width, the choice is yours, but in the end you should have your first row (if table layout is fixed) or any row (if table layout is not fixed) to contain the width definition for each invidivual cell. This will also help you with planning the correct looking table, hope this helps.
Test the table layout fixed, by creating a huge like 10 000 row table, and test the rendering speed vs a non fixed table layout.
The whole debate about HTML 4 vs XHTML , style vs attributes I think is really a question of maintainability. I don't think there is anything wrong setting the width using Style or plain width with HTML 4 transitional, they both do the same thing. The reason why you can do both is because HTML has evolved a bit, yes it can get messy! Good luck
Just add <div> tag inside <td> or <th> define width inside <div>. This will help you. Nothing else works.
eg.
<td><div style="width: 50px" >...............</div></td>