I can't understand why doesn't this table align properly. There are 9 pictures in first row, and 3 pictures in the second row. For some reason this table stretches beyond what is necessary, and produces gaps between the pictures. The width of the table is 990 and sum of widths of all the pictures for each row is also 990 (I don't count border width here, I just included it to show where the cells separate. The gap between the pictures is so large that it can not be explained by the border width).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body bgcolor="#008000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<table id="Table_01" width="990" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="1"><img src="images/index_02.jpg" width="90" height="52" /></td>
<td colspan="1"><img src="images/index_03.jpg" width="102" height="52" /></td>
<td colspan="1"><img src="images/index_04.jpg" width="112" height="52" /></td>
<td colspan="2"><img src="images/index_05.jpg" width="120" height="52" /></td>
<td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
<td colspan="2"><img src="images/index_06.jpg" width="112" height="52" /></td>
<td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
<td colspan="1"><img src="images/index_08.jpg" width="134" height="52" /></td>
<td colspan="1"><img src="images/index_09.jpg" width="80" height="52" /></td>
</tr>
<tr>
<td colspan="4"><img src="images/index_11.jpg" width="346"/></td>
<td colspan="3"><img src="images/index_12.jpg" width="308"/></td>
<td colspan="4"><img src="images/index_13.jpg" width="336"/></td>
</tr>
</tbody>
</table>
</body>
</html>
Here is how it looks. I made page background color to be green, so that it can be easily separated from images :
Try creating a css file that contains the following code and link it to your table.
#table {
border-collapse: collapse;
border-spacing: 0;
}
This should work for getting rid of the padding and margins in your table
Here is my version:
css
body { font-size:10pt; font-family:Verdana; }
.header ul li { background: url('tab-left.png') bottom left no-repeat; float:left; list-style:none; }
.header ul li a { background: url('tab-right.png') bottom right no-repeat; color:#fff; display:block; padding:10px 26px; text-decoration:none; }
.header ul li a:hover { text-decoration:underline; }
.sub-header { clear:both; }
.sub-header li { background: url('...'); }
.sub-header li a { background: url('...'); font-size:12pt; text-transform:uppercase; }
html
<div class="header">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Clients</li>
<li>Contact</li>
<li>Coordinates</li>
<li>Corporate Portfolio</li>
</ul>
<ul class="sub-header">
<li>Need Staff?</li>
<li>Looking for a job?</li>
<li>Something....</li>
</ul>
</div>
images
and
result
OK so here's my code of how I would lay this out with HTML with a little CSS to try to help put you on the path to being current with your HTML skills.
I'm going to start with your background image. Currently you have it as part if your images that you are piecing together in the table. If you have syntax errors in your code, this can lead to misalignment like what you are seeing. If instead you defined it as the background image of the body, this would never occur.
Next is the navigation. You have a bunch of tabs. These tabs include part of the background when they should really only be the images themselves. A navigation is a list of webpages, so in essence you should use an unordered list, because they are in no particular order. the css selector display: inline; tells the list's line item to change it's display type so all the images float next to each other instead of being listed down from each other. in the .nav class the margin tells it to center it, and the width is self explanatory.
<head>
<style type="text/css">
body { background-image: url('/images/background-image.png') repeat-y; }
.nav { width: 800px; margin: 0 auto; }
.nav li { display: inline }
</style>
</head>
<body>
<ul class="header-nav nav">
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
<ul class="other-nav nav">
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
</body>
To fix the above you would need to remove all the colspans from the first row. They are useless then have the colspans in the 2nd row equal no more and no less than the rowspans of the 1st row. After doing that the problem with that is your images don't add up mathematically so it'll be wrong. You really need to recut your images as well.
Definitely go CSS versions that people have posted. Please don't perpetuate 1995 HTML....
However, to answer your original question, add up the widths you've specified.
<td colspan="1"><img src="images/index_02.jpg" width="90" height="52" /></td>
<td colspan="1"><img src="images/index_03.jpg" width="102" height="52" /></td>
<td colspan="1"><img src="images/index_04.jpg" width="112" height="52" /></td>
<td colspan="2"><img src="images/index_05.jpg" width="120" height="52" /></td>
Those columns correspond to a colspan=4 group with a specified width of 346. You'd be splitting the last column as it has a colspan of 2. My head hurts already.
The second group is 3 columns:
<td colspan="1"><img src="images/index_07.jpg" width="120" height="52" /></td>
<td colspan="2"><img src="images/index_06.jpg" width="112" height="52" /></td>
Which add up to 232px. The next corresponding row is colspan=3 adding up to 308. Since 308 != 232, you're going to have spaces.
Rinse and repeat for the next columns. If you make the first row match up with the columns from the second row, your spaces go away. If I was to do this (which I wouldn't) I would just have one row and one big column with all buttons in it.....
Do not split the 2nd tr into 3 tds.
Just make 1 td in the 2nd tr and make it be td colspan='9'
I would also recommend not even doing 9 tds in the 1st <tr> because it's redundant (the images will "push" the boundaries of the table to fit their specs, regardless of td height/width settings.
Related
I'm running into a problem in my HTML code. I am trying to display a button when you hover over a row in a table. Right now the button only displays when you hover near it but I need it to show when you hover over anywhere on that row. Can anyone help explain how to do this?
.button {
opacity: 0;
}
.button:hover {
display: inline-block;
opacity: 1;
}
<table>
<tr>
<div class="button">
</div>
<td><img src="/app/images/todo/todos_incomplete_blue.svg" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<img src="/app/images/master/actions_btn.svg" />
</div>
</td>
</tr>
</table>
Right now, a button will only show when you over it directly. In order to show a button when its table row is hovered, set your CSS definition to target buttons that are inside of hovered rows:
tr:hover .button { ... }
Also:
<div> elements that are inside <tr> but not <td> are invalid, per the permitted content of <tr> elements. I have removed them, but you could wrap them in <td> elements if you need them.
I took the liberty of putting the .button images inside their <a> elements, although I'm not sure that's what you intended.
I noticed that the hover effect doesn't work over spaces between cells, which causes gaps in the hover area. So I set border-collapse:collapse; and padding the cells individually.
table {
border-collapse: collapse;
}
td {
padding: 5px;
}
.button {
opacity: 0;
}
tr:hover .button {
opacity: 1;
}
<table>
<tr>
<td><img src="//lorempixel.com/20/20/abstract/1/" width="20" height="20" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<a href="#">
<img src="//lorempixel.com/20/20/abstract/1/" width="20" height="20" />
</a>
</div>
</td>
</tr>
<tr>
<td><img src="//lorempixel.com/20/20/abstract/2/" width="20" height="20" /></td>
<td>Make a To Do List</td>
<td>Me Myself and I</td>
<td>Whenever I want</td>
<td>69%</td>
<td>
<div class="button">
<a href="#">
<img src="//lorempixel.com/20/20/abstract/2/" width="20" height="20" />
</a>
</div>
</td>
</tr>
</table>
It's my understanding that from explanation
I am trying to display a button
that initially it is hidden? If so, just trigger hover over a button with jQuery.
So, lets say wee add ID to : <tr id="myrow"> and in <div class="button"> we also add ID: <div class="button" id="mybtn">
Then in jQuery we have:
$("#myrow").mouseover(function() {
$("#mybtn").show() // if it was hidden show it
$("#mybtn").trigger("mouseover"); // trigger as if mybtn was mouseovered
});
I am trying to keep a line of text in a cell from moving down to the next line, but when using white-space: nowrap; the image background that previously covered 100% of the screen is cutoff, as seen in this screenshot:
before and after:
This is the code for the background:
div.transbox {
margin: 0px;
width: 100%;
height: 100px;
background-image: url('http://almosthome2016.org/images/header_trans_bg.png');
}
and the html for the table:
<div class="transbox"><table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td width="3%" align="left" valign="bottom"></td>
<td align="left" valign="bottom" class="style74"><span class="style8">ALMOST HOME</span> <span class="style75">THE CAMPAIGN FOR THE NEW IRISH ARTS CENTER</span></td>
<td align="left" valign="bottom" class="style75"> </td>
</tr>
</table>
</div>
This was my way of getting the opaque background as the back of the table. I'm open to other suggestions if that is what is causing the issue with the nowrap.
Thank you!
Try adding:
background-size:cover;
To your CSS for div.transbox
I'm having a bit of a problem putting together a HTML email which will render properly in outlook, i had initially got everything working fine through the use of list items and the list-style-image Property, but that isn't supported in outlook.
Basically, i have a table with 2 rows in it, the left hand side one has an 11pixel image being using as a custom bullet point, and on the right hand side is some text.
My problem is no matter what i do i cannot get the column on the left to maintain an 11 pixel width, the columns ALWAYS split equally down the middle of the table. Help please?
HTML
<table>
<tr>
<td>
<img src="Small Image" />
</td>
</tr>
<tr>
<td class="red">
<h4>
TEXT
</h4>
</td>
</tr>
<tr>
<td class="webinar">
<table>
<tr>
<td class="left">
<img src="/Bullet.png" />
</td>
<td class="right">
<p>
TEXT
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
td.webinar .left {
width:11px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar .right {
width:144px;
vertical-align:top;
padding:0px
margin:0px
}
td.webinar {
background-color:#ccc6d2;
border:1px solid #313131;
padding-top:8px;
padding-bottom:10px;
}
you want to use css styles in emails? then you are going to have a bad time in most clients..
try to:
<table>
<tr>
<td width="144px">
<img src="Small Image" />
</td>
</tr>
</table>
in email templates you should always apply inline styling as "oldschool" as possible!
I am building a website and I use a table as a header. The table has 7 columns. I use some code to automatically resize my website, the resize script works perfect. Everything resizes except the table when it is at a certain size. I think it's because of the cellpadding which is 15 but I want to keep it at 15. This is the table script:
<div id="header">
<table width="100%" align="center" cellpadding="0" cellspacing="20" style="font- family:Tahoma, Geneva, sans-serif; color:#FFFFFF; background:#FF0101">
<tr>
<td width="100%" height="70%" align="center" valign="top"><table align="left" cellpadding="15" cellspacing="0" class="menu">
<tbody><tr><td class="menu" bgcolor="#5B8CFF" onmouseover"style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Home</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Transport</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Distributie</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''"> Historie</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Vacatures</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Route</td>
<td class="menu" onmouseover="style.backgroundColor='#B30000';" onmouseout="style.backgroundColor=''">Contact</td> </tr>
</tbody></table></td>
</tr>
</table></div>
I hope somebody could help me to let the table automatic resize with the website width and not stuck at a certain width. Thanks a lot. ( I changed the href to website because I want to keep the website I'm making this for private.)
I suggest you to change your structure to something more flexible, also remember use inline styles are not aceptable (if you only use them due to your example I think it is ok, but always use css, even for examples because it is easy to help you):
Example:http://jsfiddle.net/GBTg4/
HTML
<div id="nav">
<ul>
<li>Home</li>
<li>Transport</li>
<li>Distributie</li>
<li>Historie</li>
<li>Vacatures</li>
<li>Route</li>
<li>Contact</li>
</ul>
</div>
CSS
#nav ul
{
width:100%;
list-style-type: none;
margin:0;
padding:0;
}
#nav li
{
display:inline;
float:left;
width:14.28571428571429%;
background-color: blue;
text-align:center;
}
#nav a
{
color:#FFF;
line-height:35px;
display:inline-block;
width:100%;
}
#nav a:hover
{
background-color:#B30000;
}
Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).