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>
Related
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.
I have an HTML table where the number of columns may differ from one row to another. Nonetheless, I would like the columns to be evenly spaced in their row. (For instance, if my first row contains 2 columns, each column should have 50% of the total width of the table; if the second row has 3 columns, each of them should have ~33% of the total width of the table.)
Moreover, I would like the table to have the width of the container (so probably with a width: 100%in the CSS; but the problem is that this property tells the table to split the columns evenly based on what is in the forst row only). The container width may vary, this is why I have to use percentages.
I also tried to make my table myself with divs and by specifying the width of each "cell-div" with a percentage, but this solution doesn't provide a good result on every browser: sometimes, when there is no more space on the line, the last "cell-div" of a row goes under it. (I have to specify some weird width such as 49.99998% or 33.333233% because I need some space for my borders as well.)
Sounds like you're not really using the table element to display tabular data, just for some alignment. One way to get the result that you want is to make each row its own table and just set a width. Each row will evenly distribute the cells across the table width. You might need to add some more CSS formatting to get it to behave just the way you want.
You can see this at http://jsfiddle.net/RxSe5/1/.
You can add tables inside each of the TD:
<table style="width:100%;text-align:center;">
<tr>
<td>
<table style="width:100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
Or you can just add new tables:
<div>
<table style="width:100%;text-align:center;">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<table style="width:100%;text-align:center;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table style="width:100%;text-align:center;">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</div>
you could totally nest tables, you could also use tables for layout. or you could use markup how it's supposed to be used and enjoy all the fruits of its labors (accessibility, semantics, usability, etc.) just by doing the right thing. you can can change column with via colspan="" attribute on you td elements. http://www.w3.org/TR/html-markup/td.html
I have a table with the following structure:
<table>
<tr> <td> COL 1 </td> <td> COL 2 <td> <td> COL 3 </td> </tr>
<tr> <td colspan=999> <div> LONG VERY VERY VERY LONG TEXT </div> </td> </tr>
</table>
It is possible to assign some set of CSS attribute to the DIV in the second row such that it doesn't expand the width of the table, but instead overflows the boundaries of table. Basically, I want to the width of the table to be determined by the contents of the first row.
td div { position:absolute }
You can then style the DIV to your liking.
Give the table a width. If that isn't enough, give the div one too.
If i get ur question right ill suggest u
Why use table for this.
Use CSS with floats and display it as table row or columns as required.
Is there any particular reason why chrome does not respect "display:inline" when it's used on "<table>" and is there a known workaround? Everything works fine in firefox but for some reason chrome refuses to do the right thing when I type
<table style="display:inline;">
table stuff
</table>
firefox alignment: firefox alignment http://dkarapet.userworld.com/cart_noDB/firefox_alignment.png
chrome alignment: chrome alignment http://dkarapet.userworld.com/cart_noDB/chrome_alignment.png
Both versions use the same html source that sets the display property to inline. The tables individually are not wrapped inside any other div and they are all enclosed inside one big div. Here's the pastie for the relevant part of the html.
Try inline-block.
css 2.1 defines inline-table. No idea how widely supported it is, but it sounds like that might be what you're looking for.
http://www.w3.org/TR/CSS21/tables.html#table-display
Although from your screenshot, it looks like what you really want is control over vertical alignment.
Why on earth would you set a table element to be inline? It should be a display of table. User error IMO.
You'd have to alter the display mode of all the tr and td elements inside otherwise they will improperly render, most likely.
If you need the table to be in the same line as another element, wrap a div around the table and float it. Don't mess with the table.
EDIT: As I specified per my last comment, you should mess with vertical-align and probably set it to top on the tables.
To pull of what you're after, you just need to add this to every td:
<td valign="top">
That will force everything to the top of each cell and will force things to display inline, how you want them to. No CSS needed here.
It SHOULD be coded like this:
<table>
<tr>
<td valign="top">item 1 info</td>
<td valign="top">item 2 info</td>
<td valign="top">item 3 info</td>
</tr>
<tr>
<td valign="top">item 4 info</td>
<td valign="top">item 5 info</td>
<td valign="top">item 6 info</td>
</tr>
</table>
edit: Or if (for some reason) you're not using TR and TD's you can try this:
<table style="vertical-align:top;">
table stuff
</table>
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>