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">
Related
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.
So. I am creating a small site to test my capabilities.
In my site i have a page that in Firefox looks like this:
The additional files and additional actions buttons are inside a table. and each button is inside a <td> which are set to appear one under another with CSS using display:block; on the <td> element.
The problem is that when i open the page in IE9 or lower the td's are shown inline like this:
Because of this the responsiveness of the page is broken and resizing the viewport will move the page content below the left menu...
Here is the HTML of the tables:
<table class="buttons">
<tbody>
<tr>
<th colspan="2">Additional files:</th>
</tr>
<tr>
<td>
<a id="cv" href="">Curriculum Vitae</a>
</td>
<td>
<a id="cover" href="">Cover Letter</a>
</td>
</tr>
</tbody>
</table>
<table class="buttons">
<tbody>
<tr>
<th colspan="3">Additional actions:</th>
</tr>
<tr>
<td>
<a class="approve" href="">Denie</a>
<span style="display: none;">31</span>
</td>
<td>
Reply
</td>
<td>
Delete
</td>
</tr>
</tbody>
</table>
And this is the CSS:
.buttons {
float: left;
margin: 20px auto 0;
width: 50%;
}
.buttons td {
display: block;
width: 100%;
}
Can anyone suggest me a solution?
Thank you in advance!
You need to set table-layout: fixed; to your table and if still not working add a div inside td and manage the css which might work.
The real answer here is that you shouldn't be using <table> tags for this. What you have there is not a table, and so <table> is not semantically correct.
It's even worse because you're then overriding the default table layout by using display:block, which moves us even further away from wanting to use a <table>.
By using tables like this, and forcing the browser to restructure it with CSS, you're making it quite confusing for the browser. Particularly with the colspan attributes and then three columns of buttons, when you actually want them all in one column. Its easy to see why you'd get inconsistent behaviour with this, especially with older browsers.
So the solution here is to swap your <table> layout for a set of <div> elements. This will be semantically correct, and it will be easier to get it styled consistently. And you'll need less markup as well.
If you really want to carry on using tables for this layout, then you need to re-style all the elements -- display:block on the tr elements doesn't affect the display property of the table, tbody and tr elements, and these would also need to changed. But really, I would avoid that. Just use divs; it'll make things much cleaner.
Is it good solution to put table inside a tag ? Why link doesn't work when it wraps table ?
<a href="/place">
<table>
<tr>
<td>
<span class="place-icon" />
</td>
<td>
My place name
</td>
</tr>
</table>
</a>
I need to implement the next html
No, you don't, and shouldn't. Really. It's invalid, non-semantic, and (perhaps most importantly) won't work reliably because of those reasons.
If all you want is an image and some text (which is linked), use something like:
My Place Name
.button {
display: inline-block;
background-image: url();
background-position: 2px 2px;
padding-left: 16px; /* size of image */
}
Here's a working example: http://jsfiddle.net/RvTp3/
Per comments, here is another example showing an image aligned to the vertical middle when the text wraps: http://jsfiddle.net/RvTp3/1/
it seems to me, that you just want to have a link with icon and text, both linking to /place and that you use <table> just for the layout, right? Why not get rid off the table and do the layout using css?
It's not. You shouldn't.
if you want to enable click on table. then you can just do it by attaching click event to table.
<table onclick="window.location='yoururl'">
<tr>
<td>
<span class="place-icon" />
</td>
<td>
My place name
</td>
</tr>
</table>
the best way to show you what I want to achive is showing the picture:
I tried to position nested tables to each side of row. I looked for solution but didn't find anything interesting.
When I played with "position: absolute;" i did more damage than good results. Is it possible to do it like in the picture?
EDIT: It's not my project and I don't have any influence on design. It's based on table and I have to deal with it :)
you could float it.. or you could probably just have that cell holding it set to text-align: right depends on what else is in it the cell whether you need just the nested table to the right.. (that doesn't work in all browsers)
<table width="100%" border="1">
<tr>
<td>
<table style="background: red;">
<tr>
<td>left</td>
</tr>
</table>
</td>
<td>
<table style="background: green; float: right">
<tr>
<td>right</td>
</tr>
</table>
</td>
</tr>
</table>
If you are able to use divs instead of table tags to contain the two, have a left and right div instead of your two TD tags like so:
<div class="left"><table></table></div>
<div class="right"><table></table></div>
Then just add some CSS
<style type="text/css">
.left, .right {
width:300px;
}
.left {
float:left;
}
.left table, .right table {
width:63%;
}
.right table {
float:right;
}
</style>
I would go that route as supposed to using tables. If it doesnt work though, you might need to change the display type of the td tags to block. That said, I haven't tried that before and I'm not sure how well it would work.
If you don't have any more content in the containing <td> you could float it to the right;
/* select nested tables in td's that have a preceding td sibling, effectively the second column */
table td + td table {
float: right;
}
jsfiddle demo
Keep these notes in mind:
Absolute positioning and floated children cause Great Collapse. So, your cell could get unpredictable for you.
Nested tables are not common these days. Maybe your design is wrong. Have you considered other designs. Maybe div elements inside a table cell, nesting a table inside a list item?
Table is a block level element in nature. That is, a table tries to fill its parent's width by default. So, to get to your result, you need to specify width for them.
My suggestion, keep far from tables. Use CSS positioning.
I have a table with two columns. The first (which contains a menu) should have a
fixed width, while the second (containing some page content) can vary in width. The table should overflow the window (which it doesn't by default), because otherwise the browser reduces the width of the menu column if the content is very broad. But I cannot define a fixed width for the table (causing it to overflow) because I don't know the width of the content.
Overflow:scroll
does not seem to work with tables. I would be thankful for workarounds/solutions.
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">
</td>
<td id="rootTableContent">
</td>
</tr>
The solution to this problem is to use proper CSS (Divs/Spans, etc) to layout your website as opposed to tables. I'm all for using tables to display tabular data and you'll see me arguing for them in places that they're valid, but this is not one of them.
This is easily done with something like this:
<div style="float:left; width: 150px">
Navigation Code Here
</div>
<div style="float: left">
Other Content Here
</div>
<div style="clear:both"></div>
Obviously, I'm oversimplifying this solution, you're going to have more specific code to deal with your layout (need more detail to help more specifically) But, it's important to use the right tools for the job.
As others have stated, please don't use <table> layouts. It's old, clunky, and confuses screen readers and other accessibility software.
If you absolutely insist on using your method, you can try this:
Live Demo
<style type="text/css">
div.wrap {
overflow-y: auto;
width: 75%;
}
div.wrap table {
border: 1px solid #000;
width: 100%;
}
div.wrap table td {
padding: 20px;
}
</style>
<div class="wrap">
<table class="rootTableContent">
<tr>
<td id="rootTableMenu">rootTableMenu</td>
<td id="rootTableContent">rootTableContent</td>
</tr>
</table>
</div>