I've been having this problem for awhile now.
Anyways, given this code:
<table>
<tr>
<td><img src="" /></td>
<td valign="middle">Text</td>
</tr>
</table>
This renders a format with an image to the left, and some vertically centered text to the right of it. This works because then I can have multi-line text, and still have the image positioned "nicely".
Now, ideally, tables should only be used for tabular data, yes? So how can I represent this in CSS?
I'm thinking <div> tags? But I encapsulate the entire bit in a <p> box with style="display: table; border: 1px solid black;", and I'm afraid relative positioned divs might end up jutting out of the box, necessitating tweaking, which I am loathe to do in CSS...
Help!
HTML:
<div id="container">
<img src="..." />
<p>text</p>
</div>
CSS:
#container {
width: 200px;
}
#container img, #container img{
width: 100px;
float: left;
}
<div style="vertical-align: middle;">
<img style="float:left;" src="" alt="" />
<p>Your text</p>
</div>
it doesn't matter what tags you are using (especially after a css reset). you just need to set the wrapper tag display: table; and the nested cell tags to display: table-cell; after that you can use the vertical-align you also may need put even more tags around your content to recreate a true table, whit table rows.
Related
I'm populating a large amount of text within td. I am trying to wrap the text with td if the text content takes up enough space, but the text keeps breaking out of the table.
td.noBorder {
border: none;
}
.alignTable {
border-collapse: collapse;
background: #f4f4f4;
padding-left: 10px;
text-align: center;
font: normal 13px Calibri;
color: #5a5a5a;
}
table tr td {
height: 30px;
border: solid 1px #cbd0d2;
}
<div style="margin:0 auto;">
<div style="width:730px; margin:0 auto;">
<h1 style="height:20px;font:normal 18px Calibri;color:#010101;font-weight:600;border-collapse: collapse; margin-left:20px"> Related Links </h1>
<div style="width:730px; margin:0 auto;">
<h2 style="padding-left:23px;"> Header </h2>
<table border="1" width="100%" cellpadding="0" cellspacing="0" class="alignTable" >
<tr>
<td class="noBorder" style="text-align: left;padding-left: 23px;"><!-- #06999c -->
<img src="images/arrow.png" width="5" height="10" alt="" /> <a style="padding-left: 8px;" href="{$hyperlink}" target="_blank"> LARGE TEXT </a></td>
<td class="noBorder"/>
<td class="noBorder"/>
</tr>
</table>
</xsl:for-each>
</div>
</div>
</div>
Solution 1: Make It Scrollable
You can make the td automatically scrollable if the content exceeds its regular size by setting its overflow property to auto. If you expect that the td will usually overflow its boundaries, you could also pass overflow: scroll so that it always renders with a scrollbar. Check out the MDN article if you decide to go that route.
Solution 2: Flexbox
Within the td, you could add a div and give it display: flex. Doing this would allow you to apply styles solely to that div without breaking outside of the table. This goes against the cascading principle of CSS, but should be a convenient workaround if that's all you need.
If you're unfamiliar with flexbox styles, Chris Coyier does a good job of explaining them. Flexbox is supported by nearly all modern browsers, and can be coaxed to work with IE9 and 10 if you apply vendor prefixes.
Suggestion: Refactor Your Markup
Just so you're aware, using a table-based layout is no longer a recommended way to structure most websites. If it's at all possible to refactor this into div's, doing so will keep your stylesheets organized and manageable.
You have several possibilities, one to add vertical scroll if text exceeds the margin, one to adjust the font size to fit the text inside, you should see what fits best in your page. If you create a snippet here I can help you more precise!
I have a table with text and images. I now want to add a few images and have them aligned to the bottom of the cell. What is the correct CSS to force an image to be aligned to the bottom left of a cell?
Here is the relevant CSS:
.bottomRight {
bottom: 0;
float: right;
}
.bottomLeft {
bottom: 0;
float: left;
}
Here is my html:
<td width="240">
<span style="float:right;margin-left: 1px; margin-bottom: 1px;">
<b></b>
</span>
Info
<br/><br/>
<img src="/Content/shortImage.png" class="bottomLeft">
<img class="bottomRight" height="35" width="35" title="Name" src="/Content/tallImage.jpg" >
</td>
The image tallImage.jpg does work and shows up at the bottom right but the shortImage.png which is smaller in height doesn't go all the way to the bottom of the table cell.
Any suggestions on how i get the shortImage and largeImage to both align to bottom of a table cell?
Use vertical-align:bottom;
If you differentiate your selected elements, why not use a class?
http://jsfiddle.net/SinisterSystems/x3vc7/2/
HTML:
<table>
<tr>
<td>Hello world</td>
<td class="image">
<img src="http://www.itworldcanada.com/wp-content/uploads/2013/08/Windows-XP-migration-FEature-Image-42x42.jpg" />
</td>
</tr>
</table>
CSS:
td {
height:200px;
border:1px solid #000;
}
.image {
vertical-align:bottom;
}
EDIT:
I said let us continue this discussion in chat. If your idea is to display non-tabuler-data. Read here about tabular data.
You Should Not Use a Table If:
The main purpose of the table is to position the contents on the page in some way. For example, to add spacing around an image, to place "bullet" icons on a list, or to force a block of text to act like a pull quote.
I am trying to put two images side by side inside a <td> (also tried one <td> for each img), but has some white spaces between the images, and do not understand where they come .. I can solve my problem using float, but I'm trying to avoid this. If someone can explain to me why this happens. I took some tips from other questions, but it doesn't work.
Here is my code:
<html>
<head>
<style "text/css">
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse;}
</style>
</head>
<body style="background: black;">
<center>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
</td>
</tr>
<tr>
<td>
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>
<img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>
</td>
</tr>
</table>
</center>
</body>
you can notice that the top image has 800 px height, and the other ones has 400px each one, what I need is some kinda square, without any spaces between the images.
imgs are inline elements. The horizontal space between the images is coming from the whitespace between the images in the HTML. The same reason that there's a space between the characters here.
So, to fix that, remove the whitespace: http://jsfiddle.net/xMW7N/2/
The vertical space is also because the images are inline elements. The gap is the space reserved for descenders in letters like g and j.
To fix that, set vertical-align: top on img: http://jsfiddle.net/xMW7N/3/
Although in your case (as mentioned in your question), setting float: left works just fine: http://jsfiddle.net/xMW7N/4/
That works because float: left forces display: block, so all of the problems caused by the images being inline are resolved.
It's the whitespace in your markup itself. If you remove the line-break and the spaces between the two images, the space will go away.
The whitespace is treated as text, as a single space character.
This is easier done without tables: http://jsfiddle.net/feSxA/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: black;
}
.imgHolder {
width: 800px;
margin: auto;
}
.imgHolder img {
float: left;
}
</style>
</head>
<body>
<div class="imgHolder">
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg" />
<img alt="" title="" src="http://i.min.us/ijCo96.jpg" />
</div>
</body>
</html>
try adding a border="0" in your table element
Add display: block; to your images.
This will remove any gaps caused by the image being inline but you may need to split the cells up to allow them to sit side by side.
You can also remove the whitespace which should get rid of the whitespace.
Although some questions similar to this one have been asked before, this one is a little different.
I have a table that looks a little something like this:
<table>
<tr>
<td style="height: 100px;">
<img src="..." style="height: 100px;" />
<img src="..." style="height: 100px; position: relative; top: -100px;" />
</td>
</tr>
</table>
This will overlay the second image on the first one. However, the td insists on being 200px tall even though there is only 100px of content. Setting the td's height does nothing, which seems consistent with the answers to the other questions.
However, I do not have the option of embedding the contents in a DIV and setting the height to 100px because the td will still insist on being 200px tall.
How can I tell the td to just be 100px tall?
Edit: Oh, and using absolute positioning is out of the question too because a lot of DOM manipulation goes on in the page and stuff gets moved around - whereas the absolutely positioned stuff does not.
Edit: jsFiddle example can be found here.
This has nothing to do with the td really, but with the nature of position: relative. A relative element's space stays reserved in the document flow.
Get rid of the relative, and use position: absolute on the first image instead.
Edit: I just saw your edit. Hmmm. Thinking.
Two workaround ideas come to mind:
Slap a overflow: hidden on the td
If that doesn't work in all browsers or isn't valid (I'm not 100% sure right now) Put the two images into a <div height='100px;'> and put a overflow: hidden on that.
Declaring
<td style="height: 100px; width:100px; overflow:hidden"> ...
should help you.
There is 200px of content because position:relative does not free up the space the object occupied before it was moved. You NEED to use position absolute and probably an inner DIV because things like overflow tend to cause issues on TD's.
Overlay a second image in a table cell:
<html>
<head>
<style>
table {border:1px solid #898989;}
td {border:1px solid #0090aa; overflow:hidden; height: 100px;}
td div {position:relative;}
.col1 {width:80px;}
.col1 {width:128px;}
.over {position:absolute; top:0; left:0; }
.under {}
</style>
</head>
<body>
<table>
<tr>
<td class="col1">1</td>
<td>
<div>
<img class="under" src="blank_file.png" />
<img class="over" src="19.png" />
</div>
</td>
</tr>
</table>
</body>
</html>
Instead of using position relative on the second image to move it up and overlay, use negative margin.
Change this.
<img src="..." style="height: 100px; position: relative; top: -100px;" />
Use:
<img src="..." style="height: 100px; margin-top:-100px" />
That way, it'll actually move the image up and that TD will then only span 100px.
In the following test case, the alt text is horizontally centered, but it's stuck to the top of the box. How do I get it in the middle?
<html>
<body>
<div style="height: 300px; width: 300px; border: solid black 1px;">
<img src="asdfasdf" alt="foo" style="display: block; text-align: center; vertical-align: middle"/>
</div>
</body>
</html>
One advantage of tables is they provide cross-browser vertical centering. DIVs don't. This is once case where I'd bite the bullet and add those ugly TRs and TDs.
<table cellspacing="0" style="width:300px;height:300px;border:1px solid black;">
<tr>
<td style="vertical-align:middle;text-align:center;">
<img src="asdfasdf" alt="foo" />
</td>
</tr>
</table>
It's called a single-celled centering table and ugly as it is, it works.
Try using some spaces at the start of the alt attribute. It was the only thing that seemed to work for me on chrome.
Try with display:table-cell instead of block.