I have 3 buttons in a popup form. I want to align first button at the top and other two together at the second line/row. I have implemented the below method and failed where top button is top but not wrap the content and two buttons at the bottom mesh together. How i can manipulate the buttons?
This is my html:
<div>
<table>
<tr><td colspan="2">Btn1</td></tr>
<tr>
<td>Btn2</td>
<td>Btn3</td>
</tr>
</table>
</div>
How they look like:
Thank you.
The main problem you're having here is that you are trying to apply styles from the #acc_popup CSS selector to multiple elements on the same page.
id tags need to be unique in the DOM structure, and multiple occurrences of them will cause your styles or scripts to apply only to the first occurrence of the id.
Swap the id for a class.
In the HTML:
<td>Btn</td>
In the CSS:
.acc_popup {
//styles go here
}
Edit:
Now since you've informed us you're not doing this with css. This should do what you want.
Wrap the first button in a <td> and add colspan=2 to that element. If it isn't blatantly clear, this makes the table cell span 2 columns instead of the default 1.
<div>
<table>
<tr>
<td colspan="2">Btn1</td>
</tr>
<tr>
<td>Btn2</td>
<td>Btn3</td>
</tr>
</table>
</div>
Related
I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.
I have created two HTML grid tables but I am finding difficulty while placing/aligning them parallel to each other.
I am using align = right but the table is getting aligned downwards(one below the other) and not shifting to right in parallel order . Can anyone suggest where I am making mistake in my below code and how can I rectify it?
P.S: My below code issue can be checked by copying and saving it in a notepad say test.txt and renaming it as test.html and open it in IE or Firefox browser.
<table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
<table id="vv" class="easyui-datagrid" style="width:380px;height:auto;" align = "right">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
Here is your solution:
<div style="float:left;"><table id="ss" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name2" width="80">Status</th></tr>
</thead>
<tbody>
<tr> <td>India</td></tr>
<tr><td>Canada</td></tr>
<tr><td>USA</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
<div style="float:left;"><table id="vv" class="easyui-datagrid" style="width:380px;height:auto;">
<thead>
<tr><th field="name3" width="80">Status</th></tr>
</thead>
<tbody>
<tr><td>India</td></tr>
<tr><td>China</td></tr>
<tr><td>Oz</td></tr>
<tr><td>UK</td></tr>
</tbody>
</table>
</div>
You mean you want the tables side by side rather than one below the other?
You can either add a float: left to the first table (and not forget to clear after the second table), or put each of the tables in a div and set display: inline-block on those divs.
jsfiddle.net/S45CQ/
use float:left property and either reduce width of the table or put them in a wrapper div.
Also remove two closing body tag from your html.
The align right style on a table will align all elements inside to the right. (text and images etc in each column).
You need to add "float:left;" in the style.
See here: http://jsfiddle.net/TmC4C/
You also need to specify align="left" on your first table. Although you are much better off using floats instead.
I have changed your widths to 50%, as it could also be the widths of the tables are too large for the screen size, causing one to push the other below it.
I want to align columns in a table based on a class on the header.
For example, if I have the following table:
<table>
<thead>
<th>Name</th>
<th class="price">Price</th>
</thead>
<tbody>
....
</tbody>
<table>
I know I can use :nth-of-type but sometimes the column will be the 2th, other time will be the 5th and in some places I'll have several columns in the same table align to the right.
Is there a way to accomplish that?
I don't need to support legacy browsers, not even Internet Explorer 9 (if is works on chrome and/or firefox is enough for me)
Just for clarification, I want to align the text in the columns that are in the body associated with the column at the head
No, you cannot style table cells so that styling depends on a class attribute on a column header th. There is nothing in CSS that connects cells that way.
The most robust way to align a column is to generate class attributes on each cell in it. Well, technically, using the HTML align attribute is even more robust.
EDIT: As commented below this only works with a few properties. Text-align isn't included.
Put this in your CSS:
col.price { text-align:right; }
And your HTML:
<table>
<col />
<col class="price" />
<tr>
<td>First TD of first TR</td>
<td>9,95</td>
</tr>
<tr>
<td>First TD of second TR</td>
<td>4,85</td>
</tr>
</table>
Reference:
http://quirksmode.org/css/css2/columns.html
I have the following code:
<tbody>
<tr class="listing_left">
<td>Info Here</td>
</tr>
<tr class="listing_right">
<td>Info Here</td>
</tr>
</tbody>
It is being pulled dynamically so that is for each product. So if I have 20 products, it shows that code 20 different times for each product.
I need each of those to link to a specific link. I tried wrapping the whole tbody in an anchor and that did not work. I tried wrapping the individual tr's in an anchor and that did not work.
If I wrap each TD in an anchor then that will work but the anchor is only for the specific text, it doesn't expand to the entire TR, which I need.
Any suggestions?
Well you can only have anchor tag within the td tag so I would suggest that you change your layout so you use divs instead of tables
Then you can do something like this:
<div>
<div class="listing_left">
Info Here
</div>
<div class="listing_right">
Info Here
</div>
</div>
I've run into a curious problem; I've got a form inside a <tr>, however the form refuses to wrap any tags inside it. I've made a quick JSFiddle here to play around with. Firebug reports that the form isn't wrapping anything:
The <form> element is greyed out and not wrapping anything. The HTML for this test is below
<table>
<form>
<tr>
<td>Input</td>
<td>Another input</td>
</tr>
<tr>
<td colspan="4"><span>Other stuff</span></td>
</tr>
</form>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
<tr>
<td>
Rows not affected by the form
</td>
</tr>
</table>
As can be seen, the form holds two trs in the written markup. I read here that this is invalid, so my question is can I create a form that holds two or more trs and an arbitrary amount of other elements inside a table? The table has other rows in it not associated with the form, so putting a <form> round the entire table is unhelpful, although seeing as the other rows won't have any inputs for the form (POST request), I suppose a form could be put around the entire table.
Which is a better solution; whole-table wrap, or a working fix for just enclosing the needed rows in a form tag? I know I could put a table inside a td > form, but then the column widths wouldn't be the same in the nested table, which is why I came to ask this question.
You cannot interrupt the <table> structure with any tags besides <thead>, <tfoot>, <tbody>, <tr>, <th>, or <td>. You form tags need to be encapsulated between two <td> or your entire <table> needs to be placed within the <form> tag.
<table>
<tr>
<td>
<form>
...form data...
</form>
</td>
</tr>
</table>
..or..
<form>
<table>
...
</table>
</form>
you can only put a form inside a td basically, so you could put those 2 rows inside a new table that you create inside a td
like ...
<table><tr><td><form><table><tr>...</tr><tr>...</tr></table></form></td></tr><tr>...</tr><tr>...</tr></table>
The <form> tag can only be placed inside a <td> element or outside the <table> in this case.
If I were you, I'd just put the <form> around the whole table since you said there won't be any other forms within it.
Or, you could replace the <table> completely with <div>s instead that use display: table; or display: table-cell;.