I've got a table row which has 3 columns now. text text image(with cellspan=2 and rowspan=2)
How can I remove that padding from the right inside the td.
Basically I want to push the image to the left.
img is inside td too
the problem here is, Verticle- align try to change the values as you wanted
example code
vertical-align:baseline;
assigned generally applies to common html elements. with this change, Now everything works as supposed to.
If you want to effect the entire table, you can remove explicit width from all <td>s, and then the text will take as much space as it actually needs.
If you want to effect only one row, you can put the text and the image inside the same <td colspan=2> instead of two separate <td>s
Related
I'm trying to create a list of products using a <table> since it's basically a table with rows and columns.
I want to have one of the columns list whether the item status is available or unavailable, and I'd like to represent this with a little green icon if available, red if otherwise. I also want that icon to be clickable to change it.
So I Googled and found I might be able to position it if it's a background image, but I want it clickable, so that's no good.
I've tried all the vertical aligns and centers etc.. that I've read and tried margins and padding and all sorts but I can't get my little icon image to be in the middle (horiz and vert) of my little <td>.
To clear something up:
I just want to know how to align the image within the <td>. The image itself is the anchor, when its clicked, the page reloads and the icon chanages. I've tried positioning this image within the <td> but can't. That's my question: How to position it?
Not sure why you are having difficulty aligning your image within the table cell. Tables contain many helpful properties that help with alignment. Here's an example table with images aligned to the center of the table cell.
http://jsfiddle.net/Puppies4Life/zka5Q/
First of tables should only be used for data and a list of products isn't data. I'd recommend using either plain old divs or a UL with lots of floated LI elements.
For your icon it would probably be best to make it an 'A' tag and either have the icon sitting as an image in the 'A' tag or have it as a background to the 'A' tag.
To align it horizontally make it's parent container text-align:center.
I'll assume that each product is going to be an image and be a set height? If so then to align it vertically simply make the padding-top of the container the correct height to set it in the center.
Hopefully the above will work for you :)
I've got a FORM which contains a 32*50 TEXTAREA and a Submit button.
Now I'd like to align horizontally two text areas that contains additional information. Ideally the three text areas (the one in which the user can type/paste and the two others) should have the same width and appear in three aligned columns.
If I wanted to do that, should I use only HTML? If so, how? A table with one row and three td? (Sample code would be most welcome).
Or would you rather suggest CSS?
textarea is inline element and they would be horizontally aligned if the container is larger enough in width. So, see http://jsfiddle.net/FATfJ/ I don't know if this is the exact one you need.
code:
<form id="a-form">
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
</form>
#a-form textarea {width: 100px;}
Since textarea is an inline element, you can just put such elements after another. They will then appear in one line if they fit it but wrap to two or three lines if needed.
If you would rather force horizontal scrolling when there is not enough horizontal space, you can use a one-row table. There would be nothing special with the markup:
<table><tr><td><textarea ...></textarea>
<td><textarea ...></textarea>
<td><textarea ...></textarea>
</table>
But if you wish to fine-tune the rendering, then that’s best done with CSS.
If the textarea elements need labels, as they usually do, you can place them in another row of the table (at its start).
Ideally you need a nice combination on CSS and HTML. You could perhaps use fieldsets to put your fields in and then float them next to each other using CSS. You can set widths and margins etc using CSS and you should be able to line everything up this way.
You could use tables to do this but I find that they can add more code than is really required.
How can I make a div container expand its width to contain all its child spans in one row?
Please see the example fiddle here.
I would like the div to have all the buttons inside it in one row.
UPDATE
The table from the example can not be removed. Moreover if I had a table instead of the div then the first table would expand. Now I have the div but that's not expanding.
I am going to post this as another answer, as it is not really related to my first answer.
You can wrap your spans with another span that forces no line breaks:
<span style="white-space:nowrap">...</span>
This will make your div (and table) expand to contain the buttons.
Example here: http://jsfiddle.net/jtbowden/JhDwt/
It's not the div that is constraining the spans to be on different rows, it is the table width:
<table width="300">
If you change the width to 600, for instance, all buttons will end up on the same row.
Edit: See my other answer for a method that does what you want.
It may be better to remove the table -- depending on your needs. http://jsfiddle.net/simply_simpy/nxD4G/3/
I have problem in which I have some rows which I want there to be a uniform background color but not all rows have a equal number of td elements so there are some which are longer then others and the shorter ones thusly end up with empty space. This is ok except the empty space, even when CSS style background-color is applied to the tr element, has no background. How can I apply background to an entire table row, including empty space?
You're not doing it right if you're not accounting for a uniform number of columns across each row. Either make use of colspan or add the appropriate cells.
Put the td element in there and you'll be fine. Is there a reason you need to leave it out?
I have a table created in XTMl, and I have two lines in table cell, for example:
Firstname
Surname
In the same cell I would like to place the image on the right. When I insert it like <img>
I get gap between two lines like this:
Firstname
Surname
Often the image is placed under second line. Why is that happening, and what I should do to prevent it ?
<td><strong>Name<br />Lastname<img src="images/1.gif" alt="img" /></strong></td>
Try adding the css style "white-space:nowrap;" to the td.
In the image style try adding "float:right" to the image.
The image element is an inline-block element, which means that it's a block that is part of the inline content. When you put the image tag in there, it's part of the second line of text. The second line will get high enough to hold the height of the image, that is causing the space between the texts.
You can take the image out of the inline content by making it a block element, and you can place it to the right by floating it.
Put the image tag first in the cell, and add the CSS style float:right; to it. By making it a floating element you also automatically make it a block element.