I'm new to html/css, and I'm coding a website with a rather intricate layout.
Because I'm a musician, I want to have a personal website, but I have a problem. I have these two tables, one on the left and one on the right, and I want text in the middle of the tables, but it doesn't go there and instead, goes on top of the tables. Is there any way I can make it so that it can do this?
Here's my code:
<html>
<table width="400" height="675" border="5" style="float: left" cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(embedded gadget)
</div>
</td>
</tr>
<h2 align="center">FAQ</h2>
<table width="400" height="675" border="5" style="float: right;" cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(information on the album here)
</div>
</td>
</tr>
</html>
First of all I recommend using bootstrap-3 as it is very well documented and easy to make good looking sites.
That being said I am not great at HTML or CSS either. Also you are not closing your table with . You could try doing this:
<table width="100%">
<tr>
<td>
<table width="400" height="675" border="5"cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(embedded gadget)
</div>
</td>
</tr>
</table>
</td>
<td>
<table width="400" height="675" border="5"cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(information on the album here)
</div>
</td>
</tr>
</table>
</td>
</tr>
<table>
You have a HTML error where you haven't closed your table tags.
As a beginner in HTML you need some tools to check what you've created is valid. Try running your page through a HTML validator which will tell you about errors like that And/or use View Source in Firefox which highlights errors like that in red.
Related
I have the following html in one of my mails:
<center>
<table class="button">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</center>
The problem is that on Gmail this Set Now button is properly centered but on Yahoo it is aligned to the left side. Here is picture that shows the problem:
Try following code :
<td align="center">
Set Now
</td>`
Nesting another <table> is safer than using <center>. This should cover all your bases:
<td style="text-align: center;">
<table class="button" align="center" style="margin: auto">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</td>
Try with
<table class="button" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center">
Set Now
</td>
</tr>
</tbody>
Set margin-left and margin-right to auto to the parent table. Like this,
<table class="button" style="margin-left:auto;margin-right:auto;">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
Although I must say that only styling the anchor tag to be a button is not going to work across all email clients, you probably should use code generated from here https://buttons.cm/
So I have a responsive email that has a left and right box. Which looks like this:
But in Microsoft Outlook 2003 - 2013 these two blocks render like this:
You can find my code for these boxes here: https://jsfiddle.net/uhjjqkmo/
Unfortunately I am unable to post the full code (discretion of the client).
Example DOM layout:
<!-- START:LEFT -->
<table width="295" align="left" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
Left
</td>
</tr>
</tbody>
</table>
<!-- END:LEFT -->
<!-- START:RIGHT -->
<table width="295" align="right" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
Right
</td>
</tr>
</tbody>
</table>
<!-- END:RIGHT -->
I have added some extra css rules to your code:
Updated fiddle
And I found out that it was better to put width="49%" on the floating tables (instead of width="295")
BEFORE:
AFTER:
Then an extra tip I can give you is to combine align and float.
<table align="right" style="float:right; Float: right;">
<tr>
<td width="200"><img src="" alt="" /></td>
</tr>
</table>
This to get the best possible results for floating tables in email e.g. when trying to float an image in text ;)
This link shows the problem when the page loads.
It's http://genafterdc.com/Template.html. There's no code I can spot that's creating the space.
This has become an ongoing problem that I can't get tables to line up, and gaps exist at the top. So this will solve a lot of problems and wasted time and work arounds for me.
The code is:
<table width="78%" border="1">
<tr>
<td width="15%" height="471"> </td>
<td width="41%" height="471">
<table width="100%" border="2" height="242">
<tr>
<td height="204" valign="top">Not at top -- gap shows from top
of table to this table.</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<div align="right"> </div>
<p> </p>
<p> </p>
</td>
<td width="1%" height="471"> </td>
<td width="42%" height="471"> </td>
<td width="1%" height="471"> </td>
(another table row was removed from the code for readablity)
Thanks!!
<table width="78%" border="1">
<tr>
<td width="15%" height="471"> </td>
<td width="41%" height="471" valign ="top">
<table width="100%" border="2" height="242">
<tr>
<td height="204" valign="top">Not at top -- gap shows from top
of table to this table.</td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<div align="right"> </div>
<p> </p>
<p> </p>
</td>
<td width="1%" height="471"> </td>
<td width="42%" height="471"> </td>
<td width="1%" height="471"> </td>
You were just missing a valign="top" in the fourth line. See fixed code above
Original Poster here --
I think I've solved it for this case. I added a valign="top" to a TD tag. I commented out nested tables and every else, and found a tag that sent with another box in the table in the same row that also wasn't letting things go to the top. Adding the valign seems to have fixed both. So I new about valign, but I think haven't been finding the right TD to stick it on. At least in this case. I'm not sure in the other case I couldn't solve. I need to go look.
Hopefully valign isn't downgraded by any of the browsers and will work when on TD tag with all of them.
I am placing a heading/title on a HTML page using following code:
<table width="100%" height="55px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:10px">
</td>
</tr>
<tr>
<td style="width:105px;"></td>
<td align="left" style="padding-right:10px;padding-left:10px">
<div style="font-family:quicksand;font-size: 28px; color:##bdbdc0;z- index:1000000;position:relative;">
De Graef <font size="2">Landelijk & Sfeervol Wonen</font>
</div>
</td>
</tr>
</table>
Other content is in other tables.
When i zoom in or zoom out, or simply change resolution, this text is not moving it's position in sync with the other page elements.
Any ideas?
Change your header row to this :
<tr>
<td align="center" style="font-family:quicksand;font-size: 28px; color:##bdbdc0;margin-left:-50px;background-color:##4D4946;">
<table width="956" border="0" height="100%" cellspacing="0" cellpadding="0" style="background-color:##4D4946;">
<tbody>
<tr>
<td style="background-color:##4D4946;">
<br>
<br>
<img style="background-color:##4D4946;" src="images/logonew.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm helping you here but should seriously consider rewriting all of it in a clean and modern way, most of your code is deprecated :
Use appropriate HTML markup for segmenting your document
Use <table> only when then you need an actual table
Use separate CSS files for keeping your markup clean
Read the W3C recommendations about all of this
I have a table defined as
<table border="1" width="200px" height="auto">
<tr>
<td></td>
</tr>
</table>
Is there a way that I can align the table at the center of the page, apply background color to page without using css for any of these operations?
I assume you are doing something horrible like HTML email:
<center><table bgcolor="#ff00ff"></table></center>
<center>
<table border="1" cellspacing="0" cellpadding="0" width="200" align="center">
<tr>
<td background="http://www.yourdomain.com/email/images/background.jpg" align="left">
<!-- Stuff -->
</td>
</tr>
</table>
</center>
http://www.email-standards.org/
http://mailchimp.com/resources/guides/email-marketing-field-guide/
http://www.1stwebdesigner.com/tutorials/ultimate-guide-html-emails/
The background attribute was never valid on table or td. Pretty sure the only thing the HTML 4 specification had background on was body. But I vaguely recall that it worked elsewhere and I think table cells was elsewhere--whether it works in Outlook you'll just have to test. bgcolor was valid all of those places...and is likely to work.