I have a table (dim: 100px * 500px) with background image - 1px*10px.
I write the background code in css:
background: white url(../Images/line.png) repeat-x scroll top center;
But I want to convert it to html code in the table tag not css code,
like:
<table bgcolor="#FFF" background=".....">
How can I convert this code to HTML?
This is not good.
But :
<table background="http://yoursite/images/bg.png" width="500" height="500">
<tr>
<td>This is a test ...</td>
</tr>
</table>
<table style="background: white url(../Images/line.png) repeat-x scroll top center;">
If you want to style an element inline, just write the style attribute and the CSS properties into (like in this example).
You may need to adapt the path, if your CSS file is not located in the same place like your HTML document, and that's the first problem that occurs when you style elements inline.
It's better to do this via a CSS file, because your HTML markup becomes cleaner and it will be less expensive to make changes to your layout.
Related
I am trying to put text over an image. Something like this (i have changed the background image for propriety reasons)
The tool/app i am working with has following limitations -
Using negative margins don't work
Using position:absolute and position:relative don't work
fancy stuff like grid and flexbox also dont work
I know i know. You all are thinking "what the heck is it?". But if any one of you used salesforce visualforce email templates, you will know what i am talking about.
So i need to implement it without them. I want the image to retain its aspect ratio as i compress and expand browser window.
When i use background image html tag, i notice that background image does not maintain it's aspect ratio. In full screen mode, it stretches horizontally (actual image i am using has drawing of animated characters in it, which visible look horizontally stretched out)
<div style="color:white; background-image: url('images\background.png');max-width: 100%;height: auto;overflow: hidden;background-size: 100% 100%;">
But when i use an img tag, image fits the full screen nicely, and maintains its aspect ratio when i change browser window size
<img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto">
So i figured i need to come up with a solution without using background image (or negative margin or position:relative) and somehow get text on it.
I read a post where a guy suggested a hack using tables -
How to put text over an image without absolute positioning or setting the image as backbround
It seems to work to an extend. I need help fixing it. Here is the final code i have-
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<table>
<tr>
<td></td>
<td rowspan=2 colspan=2><img src="images/background.png" style="display: block;max-width: 100%;min-width: 100%;height: auto"></td>
</tr>
<tr>
<td rowspan=2 colspan=2><h1 style="margin-top: 5rem;padding-bottom: 25rem; text-align: center; color:white">Thank you for submitting feedback</h1></td>
</tr>
</table>
</div>
</body>
</html>
Issue i am facing is if i compress browser window too much, the text float above the blue image, as shown below
Any help would be appreciated. Both text and image are part of table. Is there a way to make sure they stay within table boundaries, so they stay overlapped?
You need to align the image on the top in <td> element, because its default is middle. That is why it is being aligned that way and giving space above and below.
So, add vertical-align: top to <td> element.
td {
vertical-align: top;
}
I am displaying the images with different size in html using img tag. One of the image is 267x168 while the other is 1068x672. Both of images are same but different size. Suppose the smaller image will be aliased as it has been displayed in 50% width. But both of them just look the same. Are the images has been proprocessed before displaying? If yes, how to disable it?
<!DOCTYPE html>
<html>
<body>
<h1>Result Comparison</h1>
<style>
img {
width:100%;
}
td{
border: 1px solid black;
padding:1%;
}
</style>
<table style="width:100%">
<col width="50%">
<tr>
<td align="center"><img src="original.png" width=50%/>Original (size)</td>
<td align ="center"><img src="bicubic.png"/>Bicubic (size)</td>
</tr>
<tr>
<td align="center"><img src="average.png"/>Average (size)</td>
<td align ="center"><img src="median.png"/>Median (size)</td>
</table>
</body>
</html>
When you resize an image, some processing must happen. The software doing the resizing (be that an image-editing program or a browser) must work out some way to remove pixels or add them. It does this using an image filter algorithm. Some common ones are point, linear/bilinear and cubic/bicubic.
In most image editing programs you can choose which type of filter to use, but browsers decide for you. Luckily it looks like you can have some control; based on the information on this page, it looks like you could add a CSS rule to get a pixelated look, like so:
img {
image-rendering: pixelated;
}
However, it's worth noting that to get the pixelated look you have to use a different rule for certain browsers, according to this page. In Chrome, pixelated works, but not crisp-edges. It's the opposite for Firefox.
The items in my table are not center. I'm still a beginner and know that it is bad practice to use tables these days but I feel I should start from the beginning. I have 2 items that I would like to center in the middle of the screen in the same row. Currently, the images are to the left.
<table>
<tr align="center">
<td>
<a href="http://sourceforge.net/">
<img src="Resource/download.png">
</a>
</td>
<td>
<a href="http://sourceforge.net/">
<img src="Resource/info.png">
</a>
</td>
</tr>
</table>
Just going to post this as a seperate answer, because of how horrible the convention to use attributes for styling is. Don't ever use attributes for styling. See the MDN attributes list. See all those thumbs down next to the attribute name? They mean: 'Don't use this attribute'. It does still work, but it's just horrible. Like using deprecated tags like center, using deprecated attributes is just really bad habit. The MDN article mentions how to achieve the same thing as what you'd do with the attribute, but without the deprecated HTML.
In this situation, use:
<table style="width:100%;border:1px solid black;">
and:
<tr style="text-align:center;">
The final fiddle would be this.
Jatin gave you a solution, but he didn't explain it. Your align attribute is set properly and it's working, but the table is only as wide as its contents. The text is centered within the table as you intended, but the table itself isn't centered. Since the table is left-justified by default, it looks like it's not centered.
Especially as a beginner, you should try to do things the right way. It'll be much easier for you later if you adopt good practices early. A table is the wrong thing for what you're trying to do.
An important habit to get into is to put only your content, like text and pictures, into the HTML and put all the code that controls how it looks into CSS. Although the align property is valid (in HTML 4), it means you're putting something that controls the appearance into the HTML. The same goes for the border and width properties.
This is how you should control the appearance of a table:
HTML
<table>
<tr>
<td>
<img src="Resource/download.png">
</td>
<td>
<img src="Resource/info.png">
</td>
</tr>
</table>
CSS
table {
border: 1px solid gray;
}
td {
border: 1px solid gray;
text-align: center;
}
A better way might be like this:
HTML
Google
Yahoo
CSS
a {
display: block;
width: 50%;
float: left;
text-align: center;
}
If you wanted to center more than just a couple of links, you may want to put it into a block or a paragraph.
I put something up on CodePen that shows a few examples of how to accomplish this: http://codepen.io/Ghodmode/pen/iaEvh
Working Fiddle
Small Change:
<table width="100%" border="1">
I just started learning HTML today and was wondering how to have generic width so it fits the screen perfectly across every screen resolution?
Here is my current code, I tried using percents but code no worky!
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>
</table>
</body>
</html>
If you want your table to span the full width of the screen you should define it like this:
<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...
In general don't use the width attribute but rather the style attribute
Also noted in the comments, it's better to use semantic markup and put your CSS in external files, but if your just starting out, it's probably a good way to get going.
Some other links you might find useful:
https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials
http://getbootstrap.com/ => Advanced CSS framework (I would advice you to learn the basics first)
It's unclear exactly what you're trying to do. One interpretation is that you're trying to have an image left-aligned inside a box which occupies 70% of the page's width (here showing Resource/Header.png to be 300 pixels wide):
In that case, you need to add two empty columns and fix the table's width to 100% of the page:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
It's also a possibility that you want the image to take the whole 100% of the cell—that is, 70% of the page. In that case, you need to fix the width of the image to 100%:
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%"></td>
<td width="70%"><img src="Resource/Header.png" width="100%"></td>
<td width="15%"></td>
</tr>
</table>
Try it on JSFiddle.
…but tables are for tabular data, not for layout.
Fortunately, every result we've achieved up to now is trivial to achieve using CSS. We need a container and an image:
<header> <!-- header is a new tag in HTML 5; use something else if you want -->
<img src="Resources/Header.png">
</header>
Then, you need to style it up with some CSS:
header {
width: 70%;
margin: 0 auto;
}
Try it on JSFiddle.
I think the margin: 0 auto; line requires some explanation. We are using shorthand style, where we first provide the vertical margins and then the horizontal margins. It is equivalent to
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
We don't actually care about the margin-top and margin-bottom; what actually makes it do anything is the margin-left and margin-right. When one of the margins is auto, the browser will use that margin to fill up any extra space. When both are auto, it will evenly distribute the space between them, thus evenly padding out both sides and centering our element.
Now say we want the latter style we achieved with the table. Then we give the img all of the space within that element:
header > img {
width: 100%;
}
Try it on JSFiddle.
Note that we only needed to change the CSS, and none of the HTML needed to change. This is one advantage of using CSS over tables for layout—change the styles in one place, everything that uses those styles is updated. Also note that the code using CSS is shorter, although this isn't always the case.
…but we still aren't accessible.
If you have an image, always add an alt attribute. The alt attribute is supposed to be a replacement for the image if the user agent cannot display the image, or if the user is blind, etc. For your header, whatever text appears would be fine:
<img src="Resources/Header.png" alt="Frank's Flower Shop">
For purely decorative elements, alt="" should be used. (Yes, an empty alt is better than no alt—but only when it is purely decorative.) Refrain from describing what it is—instead, provide content that could adequately replace the image. (e.g., “screenshot” is bad; “the main window contains a toolbar and a content viewing area” is much better.)
But if it's a header, a search engine might put less weight on the alt text of an image than if it were right there. It turns out that there's a trick we can do with CSS to achieve this. First, write out the HTML as it would appear to a search engine or user with a screenreader:
<header>
<h1>Frank's Flowers</h1>
</header>
Then we can put the image as a background on the h1 and dedent the text out of view:
h1 {
width: 300px;
height: 100px;
background: url(Resources/Header.png) no-repeat;
text-indent: -10000px;
}
Ta-da! Unfortunately, it's harder to combine this approach with scaling the image. In newer browsers, you can use background-size, but that was only introduced in CSS 3. For greatest compatibility, you may want to consider using plain text where possible and aligning that over a decorative background or just not scaling it.
I have a HTML table, I would like to show an image as the content of a <td> element, and make the image occupy the whole <td> content area, so, I did the following thing:
<td id="my-img">
<img border="0" src="images/my.png" alt="Logo" width="60px"/>
</td>
I also used CSS to define the width of <td> which has the same width value as the <image> tag:
#my-img{
width: 60px;
}
But, the image does not occupy the whole <td> area, there are white spaces around the image always, why? how to get rid of it? (I am sure the white spaces are not from the PNG image file)
Try what Nick Brunt wrote, but also include the following for the css for the image:
margin: 0px;
Two things:
Firstly, when defining width as an attribute of an html tag, you don't need the px, just width="60" will do.
Secondly, the spaces around the image are probably caused by padding around the table cell. Add this CSS:
#my-img{
width: 60px;
padding: 0px;
}
As a side note, simply changing the width of the picture will cause it to stretch, you need to make sure you change the height as well otherwise the aspect ratio will be off.
Table cells have padding on them by default, which pushes the content in from the border.
You can either do:
<table cellpadding="0">
or you can do
<td style="padding: 0">
Depending on if you want to apply the zero padding to all table cells or just that specific table cell.
Also, providing the entire table in your question might allow us to help you further.
Try a different doctype for your html document:
http://www.w3schools.com/tags/tag_doctype.asp
XHTML sometimes solves similar problems.
If this doesn't help, consider using my.png as a background with background-repeat: no-repeat css style.
#my-img{
width: 60px;
background: no-repeat url(images/my.png);
}