I am looking for a HTML attribute (not a CSS declaration) which will remove the padding from the <table> element. I would also like to achieve the same thing as is done with border-collapse: collapse;
I know that this can be very easily done with CSS by setting the margin and border-collapse properties of the table.
In my specific case, I am generating final documents with an old program which cannot read CSS.
Are you looking for the classic attributes:
<table cellpadding="0" cellspacing="0" border="0">
that can control the cell padding, spacing and border?
Related
I am hoping someone can help me out here.
MANY months ago, I came on here looking for an answer to why my email wasn't displaying at 600px on a certain email client(I can't remember which one but it's probably Gmail). I have been using the following code over the last few months:
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
style="margin: auto;" width="600px;" width="600">
<tr>
<td style="width:600px;" >
For the life of me, I cannot remember why the width is defined in both px and without px on the table. Then defined again on the TD in 600px. I've Googled it like crazy but no answers so far. Any help would be appreciated.
Setting the width of a table
In a nut-shell, there are two ways to set a width for table or its inner elements (e.g. tr, td, etc—which support width)
Using width property: as part of HTML spec, you can use width property as part of the markup. Like you have width="600" in your table tag. Please note, however, only numeric pixel value or percentage is valid (https://www.w3.org/TR/html401/struct/tables.html#adef-width-TABLE )
Using inline style property or CSS declaration: Like how you have style: 600px; in your td. Here, any valid CSS units can be used.
While it's typically considered a bad practice to use HTML markup for styling or/and rely heavily on inline styling, for HTML emails not only rely on both—often used simultaneously. Because, well, HTML emails are its own kind of beast.
Why table width doesn't render as intended
It's hard to answer with specific context. Table cells could collapse when there's no content inside, which might affect the widths of their containing elements. There might have been a typo. There might have been an invalid value used in a style declaration. There might have been a conflicting style definition. Or any number of other factors.
The only needed way to set a width on a <table> for an HTML email is to use an inline style.
<table style="width:600px; margin:auto; background-color:#fff;" align="center" border="0" cellpadding="0" cellspacing="0" >
This is the best way to do it because it will take into account The Outlooks on Windows at 120dpi rendering. This is also a personal recommandation of mine to prefer styles over attributes, which is why I moved the background-color in a style as well above.
The only exception to this is for images. The Outlooks on Windows don’t understand a width style on images, only a width attribute. So you always need to define a fixed width for Outlook on Windows in an HTML attribute, and then a fluid width in a style for other clients if you need it.
<!-- Bad example -->
<img src="example.jpg" alt="" width="100%" />
<!-- Good example -->
<img src="example.jpg" alt="" width="600" style="width:100%;" />
use 1 - 100 % at the place of px
I am creating a document.So I have to create an html table, but only with the outside border the catch is I can't use any CSS.
I have tried many things I have searched the internet and nothing showed up..
<table> width="60%" height=100% align="center"
border="1px" cellpadding="5" cellspacing="1">....Information...<table>
This is the table styling that i have done but if i show the border ( border="1px" ) the border is inside and outside like a regular table border but i need it to be only in the outside.
I expect the table border to be only outside but it's both inside and outside like the regular table border.Is there any way i can do this without using any CSS?
without using css i guess this is the only way to show how want to see the table.
<table frame="box">
then try this..
<div style="border:1px solid #000;">
<table>..........</table>
</div>
Okay, I have an exam on friday on html basics, the only problem I still have is that the hspace and vspace attribute in combination with an iframe, it just does not give me space between the iframe and the tekst next to it... if it try it with an image it works super. I will give an example.
<img src="image.jpg" align="left" hspace="10"> gives me 10 pixels of space
<iframe src="something.html" align="left" hspace="10"> gives me an ifram to the left to a text (what is what I want) but it does not give me the 10 px of whitespace
we are nonly alowed to use html in this test. Can somebody please help me? Thanks!
The iframe element never had hspace and vspace attributes, or anything like that, in any specification or implementation.
If you need to do things with HTML alone, no CSS allowed, presumably as an odd exercise, then you need to resort to rather ugly tricks. To set spacing on all sides of an iframe element, you could use a single-cell table with cell padding set:
<table cellpadding="10" align="left"><tr>
<td><iframe src="about:blank"></iframe>
</table>
Hello world!
But if you need spacing e.g. only to the right of the iframe element, you can use a different table trick, with a 10px wide cell between it and the text. Note that this affects the overall layout, since now you have the stuff in a table.
<table cellpadding="0" cellspacing="0">
<tr valign="top">
<td><iframe src="about:blank"></iframe></td>
<td width="10"></td>
<td>Hello world!</td>
</table>
I have a <table> in an HTML template, in which I want to space cell only horizontally. I have tried using <div>s is not an option as email clients are harsh on styling. Using cellspacing spaces cells equally vertically, which is unwanted.
I am open for dropping table and use divs or any other tag, I couldn't find any. I basically have only two cells (and only one row) in the table, and want to space them away.
Is there any way of doing this?
I found a way of doing this. I just added another <td width="40%"> and it worked.
Css can achieve it:
<style>
td
{
padding-left:70px;
padding-right:70px;
}
</style>
Or if style tag doesn't work here is the inline CSS to do the same-
<td style="padding-left:70px; padding-right:70px;">
Demo
Is
<table border="0" cellspacing="0" cellpadding="0" align="center">
The same as
<table align="center">
?
As far as HTML only is considered, border="0" is the same as not using the border attribute at all. (Note that border=“0” with “curly” quotes, as in the heading of the question, is invalid in HTML; the quotes, if used, must be "straight" or 'single-straight'.) But in the presence of CSS, it may make a difference; the explicit attribute border="0" may override CSS settings.
Regarding cellspacing and cellpadding, mentioned in the body of the question, they do make a difference. Their default values, by implementations (the specs are silent about this), are small positive integers, typically 2.
The border will be the same but unless you add the cell padding and cell spacing as zero you'll get around 2px of each on your cells.
You could set this to zero in your style sheet though and leave them black. But the default behavior will add the padding/spacing in.