I have a following layout. I want all the TDs of equal width and extra space around them.
If I use float:left; over TDs all get equally sized but then vertical-align: middle; stops working.
Is there a way I can do it without using float:left;?
<table class="student_table">
<tr>
<th class="class_box" colspan="4">Batch 2012</th>
</tr>
<tr class="batch_header">
<td> Hi </td> <!--Have to center this-->
<td> Hi </td>
<td> Hi </td>
<td> Hi </td>
</tr>
.batch_header{
width: 245px;
display: inline-block;
}
.batch_header td{
width:30px;
height:30px;
background-color:#EEE;
margin:0px;
padding:2.5px;
border:0px;
<!-- float:left; --> <!-- < equally sized with this but not vertically aligned is not working-->
font-weight: bold;
font-size: smaller;
text-align:center;
vertical-align: middle; <!-- < This is not working-->
}
No CSS needed because you are using tables and tables own sometimes
Here is the table for you
<table>
<tr>
<th colspan="4" align="center" valign="middle" bgcolor="#CCCCCC">Batch 2012</th>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
<td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
<td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
<td align="center" valign="middle" bgcolor="#666666" style="width:100px; margin-left:10px;margin-right:10px;"> Hi </td>
</tr>
</table>
Here is a updated demo for you
https://jsfiddle.net/1zhdLb55/3/
EDIT
If you now dont want fixed width just delete the width:100px; and it will still give you space on left and right. If you dont want borders just add border:0 cellspacing:0 etc
Add line-height: 1.9; to .batch_header td{}
.batch_header{
width: 140px;
float: left;
}
.batch_header td{
width:30px;
height:25px;
background-color:#EEE;
margin:0px auto;
float:left;
padding:2.5px;
border:0px;
font-weight: bold;
font-size: smaller;
text-align:center;
vertical-align: middle;
line-height: 1.9;
}
<table class="student_table" border = 1>
<tr>
<th class="class_box" colspan="4">Batch 2012</th>
</tr>
<tr class="batch_header">
<td> Hi </td> <!--Have to center this-->
<td> Hi </td>
<td> Hi </td>
<td> Hi </td>
</tr>
</table>
See Demo
using only HTML
<table width="100%">
<tr>
<th colspan="4" align="center" valign="middle">Batch 2012</th>
</tr>
<tr>
<td width="25%" align="center" valign="middle"> Hi </td>
<td width="25%" align="center" valign="middle"> Hi </td>
<td width="25%" align="center" valign="middle"> Hi </td>
<td width="25%" align="center" valign="middle"> Hi </td>
</tr>
</table>
Try adding the style: table-layout:fixed to your table css style (.student_table) and make sure the table has a set width. Remove the float:left and the td width (it will calculate equal width to all cells) and remove the display: inline-block on the <tr> tag.
Related
This question is very similar to How to link block level elements in html e-mails?, but that question is quite old and the solutions provided didn't fit my use-case. I'm working on an email template that shows a row of items each kept within a table with multiple rows. Each of the gray boxes is its own table.
<table cellpadding="4" cellspacing="4" style="table-layout:fixed; width:800px; margin: 0 auto;">
<tr>
<td style="background-color: #f3f3f3; border-color: #cfcfcf; vertical-align: top; border-style: solid; border-width: 1px">
<table cellpadding="0" style="table-layout:fixed; width:100%">
<tr>
<td style="color: #525252; vertical-align: top; height: 35px;"> Item 1 </td>
</tr>
<tr>
<td style="color: #525252; height: 150px"><img src="https://www.isdntek.com/gif/polaroid140.gif" style="height: 10px;" /></td>
</tr>
<tr>
<td> $9.99 </td>
</tr>
<tr>
<td> 20 bids </td>
</tr>
<tr>
<td> 20 watchers </td>
</tr>
</table>
</td>
<td style="background-color: #f3f3f3; border-color: #cfcfcf; vertical-align: top; border-style: solid; border-width: 1px">
<table cellpadding="0" style="table-layout:fixed; width:100%">
<tr>
<td style="color: #525252; vertical-align: top; height: 35px;"> Item 2 </td>
</tr>
<tr>
<td style="color: #525252; height: 150px"><img src="https://www.isdntek.com/gif/polaroid140.gif" style="height: 50px;" /></td>
</tr>
<tr>
<td> $9.99 </td>
</tr>
<tr>
<td> 20 bids </td>
</tr>
<tr>
<td> 20 watchers </td>
</tr>
</table>
</td>
<td style="background-color: #f3f3f3; border-color: #cfcfcf; vertical-align: top; border-style: solid; border-width: 1px">
<table cellpadding="0" style="table-layout:fixed; width:100%">
<tr>
<td style="color: #525252; vertical-align: top; height: 35px;"> Item 3 </td>
</tr>
<tr>
<td style="color: #525252; height: 150px"><img src="https://www.isdntek.com/gif/polaroid140.gif" style="height: 100px;" /></td>
</tr>
<tr>
<td> $9.99 </td>
</tr>
<tr>
<td> 20 bids </td>
</tr>
<tr>
<td> 20 watchers </td>
</tr>
</table>
</td>
<td style="background-color: #f3f3f3; border-color: #cfcfcf; vertical-align: top; border-style: solid; border-width: 1px">
<table cellpadding="0" style="table-layout:fixed; width:100%">
<tr>
<td style="color: #525252; vertical-align: top; height: 35px;"> Item 4 </td>
</tr>
<tr>
<td style="color: #525252; height: 150px"><img src="https://www.isdntek.com/gif/polaroid140.gif" style="height: 140px;" /></td>
</tr>
<tr>
<td> $9.99 </td>
</tr>
<tr>
<td> 20 bids </td>
</tr>
<tr>
<td> 20 watchers </td>
</tr>
</table>
</td>
</tr>
</table>
sample
Right now I have two anchor tags that link to the same place - one over the item title and one over the item image. I'm trying to reduce the number of links inside the email, so ideally I'd be able to place an anchor tag over the entire table and have the whole gray box be clickable.
Unfortunately, as mentioned in the SO post linked above, putting an anchor tag around a block element is not supported in email clients like Outlook. If you do that, nothing is clickable.
Here is a JS Fiddle with code snippets for:
Our original design with 2 links for each item.
The ideal design has an anchor tag around the whole table, but it is unusable due to Outlook.
A failed attempt to use span elements with br elements to maintain the look of the original.
If I can recreate the original design with inline elements I'd be willing to try that, but each item has a dynamic title and image, so I think I have to use fixed heights to make everything line up correctly.
If anyone has any advice or techniques, I'd really appreciate it. Thank you!
How about adding an onclick to the table like this
<table onclick="location.href='your location'">
<table onclick="window.location.href='your location'">
I think this will work.
I am working on a table and for some reason, when I added rowspan, the border is popping out a little bit on the right side.
Is there a way I can merge the border?
<div class="row">
<table cellpadding="5" cellspacing="3">
<tr class="top_box" style="background-color:#001F5B;">
<td>Loan<br />Amount</td>
<td>Term</td>
<td>Monthly<br />Payment</td>
<td>Rate</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$1,000</td>
<td class="blue_1">24 months</td>
<td class="blue_2"> <br/>$45.68<br/> </td>
<td class="blue_3">8.99% APR</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$5,000</td>
<td class="blue_1">36 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$158.98<br/>$124.40<br/>$103.77</td>
<td rowspan="3" border-collapse="collapse" class="blue_3">Includes 0.75% <br/>promotional <br/>rate discount<br/> and 0.25% <br/>rate discount<br/> for auto debit</td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$15,000</td>
<td class="blue_1">6 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$476.93<br/>$373.20<br/>$311.30</td>
<td rowspan="3" border-collapse="collapse" class="blue_3"></td>
</tr>
<tr class="big_box">
<td style="background-color:#C7DDF3;">$25,000</td>
<td class="blue_1">6 months<br/>48 months<br/>60 months</td>
<td class="blue_2">$794.88.93<br/>$622.01<br/>$518.84</td>
<td rowspan="3" border-collapse="collapse" class="blue_3"></td>
</tr>
</table>
table td{
border:1px solid #001F5B;
}
table .big_box td{
padding-top:16px;
padding-bottom:16px;
color:#001F5B;
}
table .top_box td{
padding:10px;
color:#F6F9FD;
}
table span{
font-size:.5em;
position:relative;
top:-9px;
font-weight:bold;
}
.blue_1{background-color:#C7DDF3;}
.blue_2{background-color:#C7DDF3;}
.blue_3
{background-color:#C7DDF3;
font-size: 15px;
border-collapse:collapse;
}
this is the CSS
I am trying to vertically center text inside my TDs.
I have tried the following but I'm unable to achieve desired results.
<table class="student_table">
<tr>
<th class="class_box" colspan="4">Batch 2012</th>
</tr>
<tr class="batch_header">
<td> Hi </td> <!--Have to center this-->
<td> Hi </td>
<td> Hi </td>
<td> Hi </td>
</tr>
.batch_header{
width: 140px;
float: left;
}
.batch_header td{
width:30px;
height:25px;
background-color:#EEE;
margin:0px;
padding:2.5px;
border:0px;
float:left;
font-weight: bold;
font-size: smaller;
text-align:center;
display: inline-block;
vertical-align: middle; <!-- < This is not working-->
}
Just Remove
float:left;
from
.batch_header td{ }
.batch_header{
width: 140px;
float: left;
}
.batch_header td{
width:30px;
height:25px;
background-color:#EEE;
margin:0px;
padding:2.5px;
border:0px;
font-weight: bold;
font-size: smaller;
text-align:center;
vertical-align: middle; <!-- < This is not working-->
}
<table class="student_table" border = 1>
<tr>
<th class="class_box" colspan="4">Batch 2012</th>
</tr>
<tr class="batch_header">
<td> Hi </td> <!--Have to center this-->
<td> Hi </td>
<td> Hi </td>
<td> Hi </td>
</tr>
</table>
JSFiddle Demo
Note: I have given border to table for visibility purpose.
Update:
Please see Demo2 Here
Just Added line-height: 1.9; in CSS
If you take out the display: inline-block; and float: left; lines, it will look the way you want.
No CSS needed because you are using tables and tables own sometimes
Here is the table for you
<table width="200">
<tr>
<th colspan="4" align="center" valign="middle">Batch 2012</th>
</tr>
<tr>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
<td align="center" valign="middle"> Hi </td>
</tr>
</table>
Here is a demo for you
https://jsfiddle.net/1zhdLb55/1/
I need to make a table-based layout and made my table width 550px. And then I loaded an image with original width of 550px but on browser I only have 449px. I want to make in on full width. And also I have extra space between cells.
<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0">
<tr style="margin:0; padding:0;">
<td style="font-size:12px; line-height: 12px; width: 100%; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td>
</tr>
<tr>
<td style="width:100%; height:10px;" cellspacing="0" cellpadding="0">
<img style="width: 100%;" src="border-top.png" />
</td>
</tr>
<tr>
<td style="width:50%; background-color:white;">
<img src="brugadalogo.png" />
</td>
<td style="width:50%; background-color:white; text-align: right;">
<img src="msdlogo.png" />
</td>
</tr>
</table>
Your table columns are not uniformly even. You have 3 rows, the first 2 have 1 column and the last one has 2 columns. Even if you have the right percentages, it is better to have it distributed evenly. Such as have all 3 rows have or "take the space of" 2 columns.
What I mean by that is that instead of using widths, you should use colspan. Also remove the width from the image, if you want its original size, it should get it by default.
<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0">
<tr style="margin:0; padding:0;">
<td **colspan="2"** style="font-size:12px; line-height: 12px; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td>
</tr>
<tr>
<td **colspan="2"** style="height:10px;" cellspacing="0" cellpadding="0">
<img src="border-top.png" />
</td>
</tr>
<tr>
<td style="background-color:white;">
<img src="brugadalogo.png" />
</td>
<td style="background-color:white; text-align: right;">
<img src="msdlogo.png" />
</td>
</tr>
</table>
Hope this solves your issue.
I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:
<table style="border:solid;width: 100%">
<tr>
<td align="center">
<table style="border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:
<td style="text-align:center">
And this:
<td style="margin: 0 auto">
And the tables keeps in the left-side of the cell. Any suggestions?
You had the right idea with margin:auto 0; just take off the 0.
Working example: http://jsfiddle.net/cxnR8/
<table style="border:solid;width: 100%">
<tr>
<td>
<table style="margin:auto;border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But, more importantly, do you really need to use tables and in-line styling?
Center the table using the deprecated align="" attribute.
<table>
<tr>
<td>
<table align="center">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
Your seccond suggestion is correct. See this working example.
HTML:
<table class="outer">
<tr>
<td>
<table class="inner">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
.outer
{
width: 100%;
border: solid 1px red;
}
.inner
{
width: 25%;
margin: auto;
border: solid 1px blue;
}