I need to center-fit a background image in a HTML Table row <tr>, the size of the image is 40px height and 10px width. Also I need to put a border around the background image, same with border:2px solid #cccccc;
The HTML is generated from Javascript so changes must be in CSS.
Here is how it looks:
Rendered part of the page:
http://snag.gy/4EYin.jpg
Generated HTML:
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<ul class="mystyle">
<li>
</li>
</ul>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<ul class="mystyle" style="padding-top: 0px; padding-bottom: 0px;">
<li>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
CSS:
.mystyle {
border:2px solid #cccccc;
background: url(../images/bar.png) no-repeat center left;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe732', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
width: 247px;
}
Update:
The current image is almost good only that it have some unwanted "spaces" top and bottom.
<style>
.mystyle {
border:2px solid #cccccc;
background: url(bar.png) no-repeat center left;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe732', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
width: 247px;
background-position:center;
}
</style>
Related
I am trying to find a way to make a cell transparent or semi-transparent. The below code should work but doesn't:
<html>
<style>
op {
opacity:0.3;
filter:alpha(opacity:30)
}
</style>
<body background="background.jpg" style="background: black;">
<table border="1" width="100%" height="222">
<tr>
<td class="op" bgcolor="#FFFFFF" height="216"> </td>
</tr>
</table>
</body></html>
You haven't properly defined the CSS class, class definition must begin with a dot, in your case .op.
Also, your are mixing CSS and HTML attributes, you should only only CSS (note that definitions for HTML tags don't start with a dot):
<html>
<style>
body {
background-image: background.jpg;
background-color: black; /* for testing without the image*/
}
table {
border: 1px;
width: 100%;
height: 222px;
}
td {
height: 216px;
}
.op {
opacity:0.3;
filter:alpha(opacity:30);
background-color: #FFFFFF;
}
</style>
<body>
<table>
<tr>
<td class="op"> </td>
</tr>
</table>
</body></html>
I've read a lot of questions about this problem, but none of those could solve it perfectly: the cell won't be clickable at its full height.
As shown in the picture, I made a headline for my webpage using the <table> tag and colored the clickable content into blue, while the whole table is orange.
The HTML code is:
<table class="visible" id="menu" align="center">
<tr>
<td><p>Home</p></td>
...
</tr>
</table>
And the CSS code is:
#menu a {
display: block;
text-decoration: none;
}
Unfortunately, as you can see, not the whole cell is blue, therefore not the whole cell is clickable. Could anyone tell me a perfect solution for this (possibly without using JavaScript)?
Try display: flex and justify-content: center instead of display: block.
a {
background: lightblue;
display: flex;
justify-content: center;
text-decoration: none;
}
<table align="center" border="1">
<tr>
<td><p>Home</p></td>
</tr>
</table>
Do not use <p/> (block-level) inside <a/> (inline-level).
a::after {
display:block;
content:" ";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:yellow;
z-index:-1;
}
td
{
position:relative;
z-index:0;
}
delete styles for "a".
https://jsfiddle.net/1nrbL1mu/9/
This also works for IE:
a::after
{
display:block;
content:" ";
position:absolute;
top:0;
left:0;
width:100%;
height:300px; /* max possible */
background:yellow;
z-index:-1;
}
td
{
position:relative;
z-index:0;
overflow:hidden;
}
https://jsfiddle.net/1nrbL1mu/12/
Try puting it o new table of one column and one row
<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <a href="#" title="Conoce más" style="text-decoration: none; color: #010000;" target="_blank">
<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border: 1px solid #f3b946; text-align: center; padding: 10px 35px 10px 35px; font-size: 18px;">CONOCE MÁS
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
Really sill question but i can't get it to work like i want to... don't do much html anymore. Here's what i got:
<table border="0" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th><th width="10"> </th><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th></tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} </td>
<td> </td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} </td>
</tr>
</tbody>
</table>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>
The second table is not conforming to 600 width, it seems to be overwritten somewhere. I thought if i write any type of inline styles it overwrites everything else. ... I basically want my second table to be the same size as the first.
I've tried just putting an extra <tr><td></td></tr> inside the first table and eliminating the second table altogether but than it makes one td wider and squishes the other in the first two td's
*****This is for an email*****
Here's the header.phtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0;
padding: 0;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing:0 !important;
}
/* What it does: Fixes Outlook.com line height. */
.ExternalClass,
.ExternalClass * {
line-height: 100%;
}
/* What it does: Fix for Yahoo mail table alignment bug. */
table {
border-collapse: collapse;
margin: 0 auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
/* Create a class for every link style needed; this template needs only one for the link in the footer. */
.mobile-link--footer a {
color: #666666 !important;
}
/* What it does: Overrides styles added images. */
img {
border:0 !important;
outline:none !important;
text-decoration:none !important;
}
#media screen and (min-device-width: 768px) {
/* Hides the nav menu except for gmail */
*[class].desktopHide {
display: none !important;
}
}
/* Media Queries */
#media screen and (max-device-width: 600px), screen and (max-width: 600px) {
/* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
.email-container {
width: 100% !important;
}
/* Hides the nav menu except for gmail */
*[class].mobileHide {
display: none !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="fluid"],
img[class="fluid-centered"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: auto !important;
}
/* And center justify these ones. */
img[class="fluid-centered"] {
margin: auto !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="stack-column"],
img[class="stack-column-center"] {
width: 100% !important;
max-width: 600px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-half"],
img[class="stack-column-center-half"] {
width: 100% !important;
max-width: 300px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-third"],
img[class="stack-column-third-center"] {
width: 100% !important;
max-width: 120px !important;
height: auto !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column"],
td[class="stack-column-center"] {
display: block !important;
width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column-half"],
td[class="stack-column-half-center"] {
display: inline-block !important;
width: 50% !important;
direction: ltr !important;
}
td[class="stack-column-third"],
td[class="stack-column-third-center"] {
display: inline-block !important;
width: 32% !important;
direction: ltr !important;
}
/* And center justify these ones. */
td[class="stack-column-center"] {
text-align: center !important;
}
/* Data Table Styles */
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Change the look and layout of the remaining td's */
td[class="data-table-td"],
td[class="data-table-td-title"] {
display: block !important;
width: 100% !important;
border: 0 !important;
}
/* What it does: Changes the appearance of the first td in each row */
td[class="data-table-td-title"] {
font-weight: bold;
color: #000000;
padding: 10px 0 0 0 !important;
border-top: 2px solid #eeeeee !important;
}
/* What it does: Changes the appearance of the other td's in each row */
td[class="data-table-td"] {
padding: 5px 0 0 0 !important
}
/* What it does: Provides a visual divider between table rows. In this case, a bit of extra space. */
td[class="data-table-mobile-divider"] {
display: block !important;
height: 20px;
}
/* END Data Table Styles */
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f8f8f8" style="margin: 0px; padding: 0px; zoom: 100%;">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f8f8f8" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none; visibility:hidden; opacity:0; color:transparent; height:0; width:0; line-height:0; overflow:hidden; mso-hide: all;">
Shop new arrivals now!
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email wrapper : BEGIN -->
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="width:600px; margin: auto;" class="email-container">
<!-- Full Width, Fluid Column : BEGIN -->
<tbody>
<tr>
<td style="font-family:Helvetica, Arial, sans-serif; color: #999999; font-size:10px; text-align: right;">
View in Browser
</td>
</tr>
<!-- Full Width, Fluid Column : END -->
<tr>
<td>
<!-- Logo + Links : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" style="font-size: 0; line-height: 0;"> </td>
</tr>
<tr>
<td valign="middle" align="center" style="padding:0px 0; text-align:center; line-height: 0;" class="stack-column-center">
<img src="http://cdn.website.com/media/wysiwyg/emails/ecomm/2016_0524_dresses/0524_Dresses_09.jpg" alt="website Stone" width="600" height="70" border="0" style="margin: auto;">
</td>
</tr>
<tr>
<td height="5" style="font-size: 0; line-height: 0;"> </td>
</tr>
</tbody>
</table>
<!-- Logo + Links : END -->
<!-- Menu : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<!-- Menu : END -->
<!-- Free Shipping Pre-Header : BEGIN -->
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mobileHide" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-top: 0px solid #eeeeee;" height="2">
<img src="http://media.website.com/6385/Shared/sca/spacer.gif" style="display: block;" height="1" border="0">
</td>
</tr>
</tbody>
</table>
Looking at your first bit of code with just the two tables, they are displayed at the same width. I modified your code to put a size 2 red border on both tables and you can see they are indeed both the same width.
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th>
<th width="10"> </th>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} </td>
<td> </td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} </td>
</tr>
</tbody>
</table>
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>
As for your second bit of code (the header.phtml file), I'll be honest, I don't quite understand how that ties in with your first. The code you provided is incomplete and nested tables within tables within tables (many of which are single row, single datacell) is just too overly complex to decipher here.
Since this is for an email, and I have battle scars from my own fights getting proper HTML formatting within an email, I will say that you have to throw out all modern standards and styles of HTML development, especially when it comes to Microsoft email clients, and pretend it's the 1990's again. Nested tables are unfortunately sometimes necessary to get what you want (shudder). Just like with any HTML design, the simpler the layout, the easier time you will have achieving it.
Here are also a few links that I found invaluable for reference and education when it came to getting an HTML email to behave properly. Hopefully they will help you as well:
How To Make An Email Newsletter That Looks The Same
CSS Support Guide for Email Clients
What You Should Know About HTML Email
Tips and Best Practices for HTML Emails in Outlook 2007, 2010
Actually both tables have same width. If you update border="01" then you will see width of the tables properly.
If you want to remove second table, add another row in the first table with colspan attribute is equal to 3 because first table has 3 columns.
<tr><td colspan="3"></td></tr>
I would like to suggest using css classes rather than inline styles.
I have a table in html.
The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align).
I tried in this way:
CSS:
table td {border-collapse: collapse;}
#tabella {border: 1px solid black; text-align: left; vertical-align: top;}
#variante {vertical-align: middle;}
HTML:
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text
<br>
<img id="variante" width="75" border="0" src="www.favetta.com/image.png">
</td>
But in this way I obtain all (text and image) aligned in the top-left corner of the cell.
Any suggestion?
Are you doing this for an email? If so inline styling is fine (although won't work in all email clients so have a default.
If email do something like...
<table>
<tr>
<td align="center">
<table width="100%">
<tr>
<td align="left">This is text</td>
</tr>
</table>
<br/><br/>
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
<br/><br/><br/><br/>
</td>
</tr>
<table>
It looks crude but some browsers and email clients will ignore 'height='. This is purely what Ive found from years of email templating.
If not email, try and avoid tables - but if you can't then try something like...
<table>
<tr>
<td class="content">
This is text
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
</td>
</tr>
<table>
css
table{
border:1px solid grey;
width:100%;
}
.content{
text-align:left;
}
.content img{
width:75px;
vertical-align:middle;
transform: translate(-50%, -50%);
margin: 100px 50% 50px 50%;
}
https://jsfiddle.net/qbss1f0t/
Here is a simple example:
table{
border:1px solid #000;
}
table tr{
height:200px;
}
table td{
width:200px;
text-align:center;
}
.textNode{
text-align:left;
padding:0;
margin:0;
vertical-align:top;
}
.imgNode img{
width:75px;
margin: auto;
}
<table>
<tr>
<td class="textNode">This is text</td>
<td class="imgNode"><img src="http://s27.postimg.org/fs9k8zewj/cow1.png"></td>
</tr>
<table>
Here is a fiddle
This should get you to where you want.
Side Note: inline styling is not a good practice.
Use this may help you
<table width="100%">
<tr>
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text</td>
<td><img id="variante" width="75" border="0" src="www.favetta.com/image.png"></td>
</tr>
<table>
I need to style a table to have rounded corners.
I'm just looking at how best to go about it:
Normally when I style a div to have rounded corners, I use 2 divs with empty comments at the top and bottom, and apply sizing & background image CSS to them.
The table, however, has internal borders, so I'd have to carefully align the vertical lines in the corner bg images, to match with the true cell borders.
Is this clear so
far?
So I was wondering how others would approach this. I think the best thing I can do is to just use one complete fixed size background image, borders and all, and overlay a borderless table on top. The table will always be the same size after all.
Can anyone think of a better way?
25 ways to do it.... http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Actually, there are too many ways to do it.
You better make a background image with just the corners, and not the borders.
Apply a class to the top left, top right, bottom left and bottom right cell, to define that the corners-background image should be used.
And style the borders with css. Don't put them in the background image.
In your approach, you'll always gonna end up having the vertical lines in your background image not match the borders of the actual table cells.
Have you tried http://www.roundedcornr.com/?
Do something like this...
XHTML: (sorry had to remove first '<' as it wouldn't let me post it normally, FIX THIS JEFF!)
table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & Canada</th>
<th>Calls to other Phones</th>
<th>Calls to other Countries</th>
<th>SMS text messages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Select</td>
<td>country</td>
<td>from</td>
<td>dropdown</td>
<td>list</td>
<td>above</td>
</tr>
</tbody>
</table>
CSS:
#pricing
{
font-weight:bold;
text-align:center
}
#pricing thead
{
background-image:url("images/pricing_top.gif");
background-position:top;
background-repeat:no-repeat;
padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
}
#pricing th
{
background-image:url("images/pricing_header_bg.gif");
background-repeat:repeat-y;
border-bottom:1px solid #c3c2c2;
width:100px /* replace 100px with the width of pricing_header_bg.gif */
}
#pricing tbody
{
background-image:url("images/pricing_bottom.gif");
background-position:bottom;
background-repeat:no-repeat;
padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
}
#pricing td
{
background-image:url("images/pricing_cell_bg.gif");
background-repeat:repeat-y;
width:100px /* replace 100px with the width of pricing_cell_bg.gif */
}
Only drawback is that you have to create 4 images, but that shouldn't take too long. You'll also need to add a class to the final cell in each row if you want to add that drop shadow on the right and just change it's background-image and width property accordingly.
Playing off of your original idea, you could add a class to each corner cell effectively turning off their respective offending borders. You could then use a full-width background image in the <thead> and <tfoot> elements to account for the rounded corners.
The rest of the cells can have their borders turned on, and the lines will line up correctly.
The only remaining issue is accounting for that blasted drop shadow. That's a different exercise.
A better way would be a 9-grid where you have the background corners, and top, bottom, left and right backgrounds repeating
Your table goes in cell 5
Edit
As some posted in the comments you can not achieve the effect with a 9-grid.
You have to do a 12-grid-system (made up by me right now :)
Live demo
.
Code:
Warning: it's not pretty, but works
<html>
<head>
<style>
.cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
.cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold; }
.cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}
.cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
.cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
.cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }
.cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
.cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal; }
.cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}
.cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
.cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
.cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }
.lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }
</style>
</head>
<body>
<table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="cell1"></th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2 lastcolumn"> </th>
<th class="cell3"></th>
</tr>
<tr>
<th class="cell4"> </th>
<th class="cell5">Incoming calls</th>
<th class="cell5">National calls</th>
<th class="cell5">Calls to US & Canada</th>
<th class="cell5">Calls to other Phones</th>
<th class="cell5">Calls to other Countries</th>
<th class="cell5 lastcolumn">SMS text messages</th>
<th class="cell6"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell7"></td>
<td class="cell8">Select</td>
<td class="cell8">country</td>
<td class="cell8">from</td>
<td class="cell8">dropdown</td>
<td class="cell8">list</td>
<td class="cell8 lastcolumn">above</td>
<td class="cell9"></td>
</tr>
<tr>
<td class="cell10"></td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11 lastcolumn"> </td>
<td class="cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
Note: there are some non-breaking spaces that SO strips from the code. Check out the living demo for more info
Enjoy!