i just started learning in HTML.
I'm having a problem in cell padding and spacing...
the one that i created have a cell padding and spacing on all row... is it possible to have a cell spacing and padding in the 1st row but not in the 2nd row?
`
</td>
<tr>
<td width="250" height="500">
</td>
<td width="750">
</td>
</tr>
<tr>
<td colspan="2" height="75">
</td>
</tr>
`
You can simply add padding to each TD not TR
But spacing between cells only for the whole TABLE
The Attribute padding is the response about cell padding
<table border="1" style="border-spacing:2px;">
<tr>
<td width="250" height="500" style="padding:5px;">One</td>
<td width="750" style="padding:5px;">Two</td>
</tr>
<tr>
<td colspan="2" height="75">Three</td>
</tr>
</table>
I would suggest to wrap the content you want to edit in a and add css properties like for example:
Take a look at this div and style combination, it gets kinda useful sometimes. You can make the particular elements special even when they are in a table with constant style.
You can even add this style attribute to the / tags themselves. Maybe what you're looking for.
Related
I have an HTML table that's being filled with content of various sizes. Some can be about a paragraph long.
All I want to accomplish is to have the cells automatically adjust in height to support the various content, without giving each row a fixed size ('cause that would look bad).
<td align="left" width="10%" height="130"><div>{{this.val8}}</div></td>
<td align="left" height="130"><div>{{{this.val7}}}</div></td>
<td align="left" height="130"><div>{{this.val6}}</div></td>
<td align="left" height="130"><div>{{this.val}}</div></td>
<td height="130" width="80%"><div>{{{this.val0}}}</div></td>
<td height="130"><div>{{{this.val8}}}</div></td>
<td align="right" width="80%" height="130"><div>{{{this.val1}}}</div></td>
<td align="right" width="80%" height="130"><div>{{{this.val2}}}</div></td>
<td height="130" width="75%"><div>{{{this.val3}}}</div></td>
<td height="130"><div>{{this.val4}}</div></td>
<td height="130"><div>{{this.val5}}</div></td>
Right now, I have fixed heights for each cell. Generally, most cells fit this height, but I'd like the ones that don't to be smaller.
Any tips or suggestions would be awesome.
Thanks!
Lets clean up your markup for starters:
http://jsfiddle.net/x3a6bu7L/
<table>
<tr>
<td align="left">
{{this.val8}}
</td>
<td align="left">
{{this.val7}}
</td>
<td align="left">
{{this.val6}}
</td>
<td align="left">
{{this.val}}
</td>
<td>
{{this.val0}}
</td>
<td>
{{this.val8}}
</td>
<td align="right">
{{this.val1}}
</td>
<td align="right">
{{this.val2}}
</td>
<td>
{{this.val3}}
</td>
<td>
{{this.val4}}
</td>
<td>
{{this.val5}}
</td>
</tr>
</table>
You don't need those DIV elements inside the TD cells.
The settings for height were incorrect and not necessary. The
proper way to set height is height:130px if you really have to.
Your widths were incorrect. If you want to use percentages you need
all TD width percentages to add up to 100%
Don't use inline CSS. Use an external CSS stylesheet or encapsulate
all your styles in a STYLE element in the HEAD.
If you need to set vertical alignment for the cells use:
td { vertical-align:top; }
Just remove all height attributes. Also please note that both height and width attributes are obsolete - use styles instead.
I'm designing a newsletter template and I'm having an issue with a table that contains graphics and text in the same row. For some reason, the graphic pushes the text all the way to the right. I'd like the text to be "connected"/left aligned with the icon as the template uses up to 3 icon sets (icon + text).
https://jsfiddle.net/o1dLoxa8/
The code doesn't look pretty right now as I've been trying everything just to make it work. Anyone able to help me out?
<table border="0" cellpadding="0" cellspacing="0" class="salesListText">
<tr>
<td align="left" valign="middle" class="saleslistIcon">
<img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/billetterL.png" alt="" height="28" width="28" />
</td>
<td align="left" valign="middle" class="saleslistIconText">
Billetter
</td>
</tr>
<tr>
<td valign="baseline" colspan="3">
<h2>Kaptein Sabeltann - Kun forestillingen</h2>
(Kan kombineres med parkbilletter og/eller overnatting)
</td>
</tr>
<tr>
<td valign="baseline">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="salesListSpec">
<tr>
<td valign="baseline" colspan="3">
<h4>Pakken inneholder:</h4>
- Billetter til forestillingen
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="saleslistPrice" colspan="3">
<h2 style="color:#E3178A;"><span>Pris fra </span>240,-</h2>
</td>
</tr>
</table>
.saleslistIcon{padding-right:10px;}
.saleslistIconText{color:#B4B4B4; font-size:12px; padding-right:8px;}
.salesListText{width:100%;}
.salesListSpec{padding-top:10px; line-height:170%; display:block;}
h2 span{font-size:16px; font-weight:normal; color:#444444;}
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right.
Try putting border="1" onto your table definition to see what I mean.
I'd suggest you use the outer table to create your rows and have only a single TD. Inside each TD then embed secondary tables for complicated layout. I'm assuming an email newsletter, so keep your CSS to a minimum or put it inline rather than a separate style section. A lot of email providers don't play nicely with CSS.
Hope that helps.
From the look of your fiddle, this is to be expected. You're using a table layout, meaning that all cells in the same column will have the same width and all cells in the same row will have the same height. My immediate recommendation is to ditch the table layout and use semantic elements.
If you're hellbent on using a table layout, you need to be aware of your colspan and rowspan attributes on your cells and how they affect your layout.
Put display:inline inside <tr> where you have the icon + text.
http://jsfiddle.net/zg0zrx3v/
Is it possible to make a table with lets say 4 columns with of 1 row with 100px in width, and then have to cells below with a with of 200px without having to create a new table?
Because if i do this, then when i set the width of 200px in new cells, the other cell changes width too.. i want the to new cells to expand to fill up the rest of the width left.
Here an example..
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td width="200px">5</td>
<td width="200px">6</td>
</tr>
</table>
JsFiddle demo
you actally need to use colspan, so you code will be as below this will do the work you want
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td colspan="2">5</td>
<td colspan="2">6</td>
</tr>
</table>
<td colspan="number"> -number Specifies the number of columns a cell should span. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup)
Try removing the cell width from the second row, but add an additional attribute to each of them, so it reads like:
<td colspan="2"></td>
<td colspan="2"></td>
This should have both these cells account for 2 cells widths, without the need to redefine their widths.
MDN TD - Attribute Colspan
I'm facing problem with table in html,
actually I fixed the width,and want to increase the td height as per the content in it,
for example : if td width is 30px and when data inside td crosses the td width i want to show remaining data in next line and so on..
table:
<table width="100%" border="1" >
<tr>
<td align="left" width="30px">
laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa text
</td>
<td align="left" width="30px">
text
</td>
</tr>
</table>
Here is the solution to your problem! The width of the columns are equal in this case, though they can be changed, not to mention.
<table border="1" width="100%" style="table-layout:fixed">
<tr>
<td style="word-wrap:break-word">Hellohellohellohellohellohellohellohellohellohellohello
<td>text</td>
</tr>
</table>
And here is the demo http://jsbin.com/ihaxob/2/edit ..
I have seen the solution from this thread!
Word-wrap in an HTML table
Please see below html:
<table style="width: 700px;table-layout: fixed ; margin-top: 30px;" cellpadding="0" cellspacing="0">
<tr class="tableHeader">
<td width="220px">Event Name</td>
<td width="120px">City</td>
<td width="77px">Date</td>
<td width="110px">Price</td>
<td width="80px">Status</td>
<td width="60px">Select</td>
</tr>
</table>
<div style="overflow: auto;height: 360px; width: 730px;">
<table style='width: 700px;table-layout: fixed;' cellpadding='0' cellspacing='0'>
<tr >
<td colspan='6' >adnanpo </td>
</tr>
<tr >
<td width='220px' >adnanpo </td>
<td width='120px' > </td>
<td width='77px' >04/20/2012 </td>
<td width='110px' >USD $30.00 </td>
<td width='80px' >Paid </td>
<td width='60px' >
<input class='orgOkButton' type='button' id='btnOpenOrder' name='btnOpenOrder' onclick='return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')</td>
</tr>
</table>
</div>
Below part is casuing the issue:
<tr >
<td colspan='6' >adnanpo </td>
</tr>
Please sse the image, the column width is disturbed!! Please help me to fix it!
The obvious solution is to remove the tr element that causes the problem. It does not seem to have a function here. If you just want some spacer there, put a div element between the two tables.
The problem arises because table-layout: fixed tells the browser to decide on column widths according to the first row, if widths have not been set in certain other ways. Here the first row has just one cell that spans all columns, and then the defined behavior is to divide the width evenly between the columns.
Alternatively, set the column widths explicitly, e.g. using
<col width=220>
<col width=120>
etc. right after each <table> tag. But make sure that the sums of the widths add up to the number you set as the total width of the table (they currently don’t). When col elements are used that way to set all column widths, browsers will use those exact widths without questioning (which may cause problems, but I presume you have considered them).
Remove 'table-layout' property in your second table and it will work fine. And close you input element (onclick="return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')"/>)
If I understand correctly, you are worried to the fact that your columns are not aligning to the top.
Let me first suggest that you use the below CSS:
table { empty-cells: show; }
This will allow the empty cell you have to fill in the space. (otherwise you can just put an in it's blank space).
Also, I suggest you use one continuous table if you can.
Close your input-tag - the > is missing. If the problem is still there we can look further.
Yes this will be the case by using colspan in the "first row" of a table. To get around this you could do something like this (again just for the first row - you can use colspan fine further down):
<tr>
<td width="220px"><div style="position:absolute;width:220px;">adnanpo</div></td>
<td width="120px"></td>
<td width="77px"></td>
<td width="110px"></td>
<td width="80px"></td>
<td width="60px"></td>
</tr>