In an .aspx file I have this html in my Head tag to hopefully rotate things 90 degrees
<style>
.rotate{
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
font-size:8pt;
}
</style>
In my body I have this:
<td class="rotate"><span id="Barcode" runat="server" /> </td>
<td class="rotate"><span id="123" content="123" runat="server" /> </td>
<td class="rotate"><span id="abc" content="abc" runat="server" /> </td>
<td class="rotate"><span id="456" content="456" runat="server" /> <span id="xyz" content="xyz" runat="server" /></td>
<td class="rotate"><span id="def" content="def" runat="server" /> </td>
<td class="rotate"><span id="789" content="789" runat="server" /> </td>
<td class="rotate" style="line-height:7mm"> </td>
</tr>
Everything shows rotated 90 degrees as needed other than the barcode, that shows horizontally still. How can I get this to rotate 90 degrees as well?
Tried different versions of css to no avail
Set the object position to absolute
<style>
.rotate{
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
font-size:8pt;
}
#Barcode {position: absolute;}
</style>
Related
I am trying to design a receipt using HTML and PHP. I managed to create the correct layout but i need rotate my div to 90 degrees. But it seems to overflow to the top.
I had to set margin-top:485px to code below for the right side table to fit the top.
<div class="rotate">
I dont want to fix the margin as the content may get longer/shorter in future.
MY CODE
.pagebreak {
page-break-after: always;
max-width: 8cm;
word-wrap: break-word;
}
.rotate {
-webkit-transform: rotate(-90deg) translate3d( 0, 0, 0);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="pagebreak">
<div class="rotate">
<label class="font-weight-bold text-center">SOME TITLE</label>
<table class="table">
<thead class="thead">
<tr colspan="3" class="">
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<div>
<label class="font-weight-bold" style="font-size:24px;">Seat No :
D6 </label>
</div>
<div id="label0" class="font-weight-bold" style="display:inline-block;" title="2BDA5339-3DAC-48DD-C1C2-8AA7D327A666"><canvas width="75" height="75" style="display: none;"></canvas><img alt="Scan me!" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAEcElEQVR4Xu2c626sMBCD2fd/6D1iVbohG+ezEyqtDum/CsjF4/F4Au1j27bnNvDzfLYfezwep9Hq++rrx83Hfcd19btaKo17PKfucyDYd7bAcpDatu0XLMWUehwVecUQtQ5ijstQGofWTziV61hgAVpdsCj3a2YpLVBaRVpXM4U0jTSM1uHud5/ng1nuwyTctEhKD5WGKlg0Xh1UFZSenPwZWPWkVI3cakjVjDSMNHeBVdDuK8CiNKC0UkxU6eNWMZIDV3Yu1axbgpVGzBXcWYaQj0urbOorm8xaYJ0RaPosAqm+nlavb7s/3e+JWenD37b5dD3pfl9gPd3kFaMn1WQfgqoTbYI6iNnxe/MvsCg6pUcjZrmOWTl0t9dzHb9b9VT1pdOMXtVGZi2w3sd9H2BROzAqpKOMoCxJNcrVvNZ9C6yfaDjH2faxsnukQVqRMozGI61zTyFUh1Cud4ElXrBYaaiqmoqgaqCV4ycNUuO5jCTfR/tTDOuaUnfSBdZu7X/oST5p1F+5ESZNcrSmDChZoSlmLbDeL40/BH7UR6Va5GpaesI6mhGkiS/Nqt9IL7DOYTydZ6neMI0QCT0dbrgMoqrs9n5p1bWqoatZtwLL7Zl6XXmr6rgOOg3KVetNMui3N7xqcmpPqPF10+iq9UZg0SdH7uZSBqU+i/yU+5Ypve+ULQustulpmdePNOw52P0aVTWXMeRrSMPIiafPUwadqqFbuhdYHftNh2IkyK5GjDLSDTJpHvW4XZ/lVrVbgXUIvMpZcswEaqqBpEXUU1LwiEG95+U3pe6ktwKLekNihmKeC/asJlKP5zKVMsvqDRdY73DgEU2qWaQpM5rRKdryZJf8U9I2LbCq43Olwc00pMYyZQ45acUWWkfai5LfI+1cYBWRssBSPou0pUfXVxTg5WVPf/Zr6RtwsjCudvU0Gv92hywACaRbTVV6q9KfNuKXgHX4LAJFMU0xxNUUAtPVvNn104uak2bNTkbMINNHoND66DoF2wKLekOX7qRh5LTVdfJ5bpUjjVTzlEHA3nCBVbyRrnvDUcEeTaOrmEFpREEnBls+iyxEah6VoLubSQtKGozeSbD9meQVpdfxXylotK7ZDqF8foH18y8XnGoqP5McjTBNSudLZDEojWn8tCo2q6HySVTSXVNJPscp3eVaSNBdUFwNbAp8Osls9aRgUJVV/o4Y7vrCE7Poz1EIvFuBRa/vXZqOvnx104lOISiN03la+7a/g1eaRj4mTTNKOxJwshKuL+yClTIjjZR7vkWnFQp8Yh5Vd2c/eJ7lLi5lhHs/BZGYQm0MnZB2G2k6bKPBU8ecps1s8EiDe7Ix/e9VXM1yQXbvI8tAaTniK6fBcq0FOW8qBLQ5F2Q3uJbAp2m4wGogQFWKQK7ThqwIMcnVrpTRPWd/WRreEiw3rdzTARrPFWLyQaProfnLcad9FqXXfwkWbcrVELexdjUrifw+Jp02UDXstVPTvSEJrcs819FT0BZYDcaoNuYvwfoHyIOmDZblgGQAAAAASUVORK5CYII="
style="display: block;"></div>
<script type="text/javascript" defer="">
// new QRCode(document.getElementById("qrcode"), "f738feb9-2f14-971b-f7b9-265755dfe795");
var qrcode = new QRCode("label0", {
text: "2BDA5339-3DAC-48DD-C1C2-8AA7D327A666",
width: 75,
height: 75,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</td>
<td class="text-nowrap">
<div><label class="font-weight-bold">Counter ID : PN001</label></div>
<div><label class="font-weight-bold">Ticket ID : 7</label></div>
<div><label class="font-weight-bold">Title : The Accidental Astronauts</label></div>
<div><label class="font-weight-bold">Category : Adult</label></div>
<div><label class="font-weight-bold">Type : Film</label></div>
<div><label class="font-weight-bold">Location : ROOM1</label></div>
</td>
<td class="text-nowrap">
<div><label class="font-weight-bold">Date : 21-02-2019</label></div>
<div><label class="font-weight-bold">Showtime : 12:30 AM - 11:30 PM</label></div>
<div><label class="font-weight-bold">Price : RM 12.00</label></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Current output : The picture is cut half
Expected output after rotating div:
.rot90 {
-webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
-moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
/*-moz-transform-origin: right top; */
-ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
-o-transform: translateY(-100%) rotate(90deg); /* Opera */
transform: translateY(-100%) rotate(90deg); /* W3C */
-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
}
I am trying to make a floating menu that sticks to the top of the screen and has a few icons you can click, most of which will submit a form. As it stands though, the filechoosebutton is hidden via css, but even though it is not rendering, it still causes my download button to disappear offscreen. How can I fix this?
Thanks for any clues
Here is the html for the menu
<div id='floating_menu'>
<table >
<tr>
<td >
<form action='' method='post' id='trash1' >
<img src='http://s27.postimg.org/jua3mu9q9/trash.jpg' width="35" height="45" alt='delete' />
</form>
</td>
<td >
<img id='storagebutton' src='http://i60.tinypic.com/2igya9d.jpg' width="35" height="45" alt='storage' />
</td>
<td >
<form id="uploadtsvform" enctype="multipart/form-data" method="post" action="">
<input id="filechoosebutton" name="uploadFile" type="file" onchange="this.form.submit()" />
<img id='uploadbutton' onClick='chooseFile()' src='http://oi59.tinypic.com/2lm0yky.jpg' width="35" height="45" alt='upload tsv' />
</form>
</td>
<td >
<img id='downloadbutton' src='http://i62.tinypic.com/zu4n03.jpg' width="35" height="45" alt='download tsv' />
</td>
</tr>
</table>
</div>
Here is the css that creates the floating menu
#floating_menu {
background:white;
width:250px;
height:25px;
position:fixed;
top:10px;
right:0;
}
Here is the css that hides the usual Browse upload button
#filechoosebutton {
height:0px;
width:0px;
overflow:hidden;
}
Here is a Fiddle
You form is eating up the space of the download button. Try adding
#uploadtsvform {
display: inline-block;
width: 50px;
}
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to align a <div> to the middle of the page
I need is to show the content of a web page in the middle of the screen, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the middle of screen.
I'm guessing you want to center the box both vertically and horizontally, regardless of browser window size. Since you have a fixed width and height for the box, this should work:
Markup:
<div></div>
CSS:
div {
height: 200px;
width: 400px;
background: black;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
The div should remain in the center of the screen even if you resize the browser. Just replace the margin-top and margin-left with half of the height and width of your table.
Edit: Credit goes to CSS-Tricks, where I got the original idea.
Solution for the code you posted:
.center{
position:absolute;
width:780px;
height:650px;
left:50%;
top:50%;
margin-left:-390px;
margin-top:-325px;
}
<table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
<td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0">
<tr>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
<td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
<td width="150"><img src="images/banners/BAX Company.jpg" width="149" height="130" /></td>
<td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
</tr>
</table>
</td>
</tr>
</table>
--
How this works?
Example: http://jsfiddle.net/953Yj/
<div class="center">
Lorem ipsum
</div>
.center{
position:absolute;
height: X px;
width: Y px;
left:50%;
top:50%;
margin-top:- X/2 px;
margin-left:- Y/2 px;
}
X would your your height.
Y would be your width.
To position the div vertically and horizontally, divide X and Y by 2.
If you want to center the content horizontally and vertically, but don't know in prior how high your page will be, you have to you use JavaScript.
HTML:
<body>
<div id="content">...</div>
</body>
CSS:
#content {
max-width: 1000px;
margin: auto;
left: 1%;
right: 1%;
position: absolute;
}
JavaScript (using jQuery):
$(function() {
$(window).on('resize', function resize() {
$(window).off('resize', resize);
setTimeout(function () {
var content = $('#content');
var top = (window.innerHeight - content.height()) / 2;
content.css('top', Math.max(0, top) + 'px');
$(window).on('resize', resize);
}, 50);
}).resize();
});
Demo: http://jsfiddle.net/nBzcb/
HTML
<!DOCTYPE html>
<html>
<head>
<title>Center</title>
</head>
<body>
<div id="main_body">
some text
</div>
</body>
</html>
CSS
body
{
width: 100%;
Height: 100%;
}
#main_body
{
background: #ff3333;
width: 200px;
position: absolute;
}
JS ( jQuery )
$(function(){
var windowHeight = $(window).height();
var windowWidth = $(window).width();
var main = $("#main_body");
$("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});
See example here
So I'm working on this site and for some reason a couple of the pages do not align correctly in firefox and opera, but work just fine in chrome, IE, and Safari. The basic construction is that I have a div with width, height=100%, within the Div i have a table to separate the sections of the page. The left and right side columns should be filling up the remainder of the width of the screen however in firefox and opera the columns have no width, but in IE, Chrome, and Safari they fill up the remainder. In playing with it if i remove the width parameters on the two middle cells it will line up correctly but this causes text alignment issues in chrome, IE, and Safari. How do I get the columns to fill up the page in all browsers?
Here is a link http://its.truman.edu/International/Meet_A_Student.htm
Here is my code,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meet A Student</title>
<style type="text/css">
#outer {
opacity: .5;
}
#img1 {
opacity: .3;
}
#table1 {
opacity: 1;
}
</style>
</head>
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">
<table style="width: 100%; height:100%; border-collapse:collapse">
<tr>
<td rowspan="4" style="background-color:#2BA7D0; margin-right:0px; height:100%;" id="outer" >
</td>
<td colspan="2" style="text-align: center; background-image: url('Pictures/Header_New.jpg');width:960px; height:100px" valign="bottom" >
<table style="width: 100%; border-collapse:collapse">
<tr>
<td style="width:20%"> <a href="/International/Home.htm">
<button type="button" style="color: black;background: #2BA7D0; border:0; height:50px; width:100%">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Home
</span>
</button>
</a></td>
<td style="width:20%">
<button type="button" style="color:white; background:#FA7042; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Meet A<br/> Student
</span>
</button>
</td>
<td style="width:20%"> <a href="/International/Available_Funds.htm">
<button type="button" style="border-style: none; border-color: inherit; border-width: 0; background: #2BA7D0; height:50px; width:100%">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold; WORD-WRAP:break-word">
Available <br /> Funds
</span>
</button>
</a></td>
<td style="width:20%"> <a href="/International/Contact.htm">
<button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Contact <br/> Truman
</span>
</button>
</a></td>
<td style="width:20%"> <a href="/International/Give.htm">
<button type="button" style="color:black; background:#2BA7D0; border:0; height:50px; width:100%;">
<span style="font-family:Calibri; font-size:16pt;font-weight:bold">
Give
</span>
</button>
</a></td>
</tr>
</table>
</td>
<td rowspan="4" style="background-color:#2BA7D0; height:100%;" id="outer">
</td>
</tr>
<tr>
<td style="width:480px" >
<div>
<img alt="Wanding Shi" src="Pictures/Wanding Shi.jpg" style="float: left; margin-right:10px" width="258" height="389"/>
<div>
<p style="font-family:Calibri">
<span style="font-size:16pt">
Wanding Shi
</span><br />
Senior Business Major<br />
<br />
Home Country - China<br />
<br />
"I enjoy the environment at Truman and have
gotten involved in Phi Beta Lambda and the
Bulldog Investment Fund. I am grateful for
the opportunity to get to know students from
different countries while at Truman."
</p>
</div>
</div>
</td>
<td style="width:480px">
<div>
<img alt="Babajide Adio" src="Pictures/Babajide_Adio.jpg" style="float: left; margin-right:10px" width="240" height="389" />
<div>
<p style="font-family:Calibri">
<span style="font-size:16pt">Babajide
Adio</span><br />
Senior Biology Major<br />
<br />
Home Country - Nigeria<br />
<br />
"At Truman, I have enjoyed great opportunities
to do research with professors since my freshman
year. I have also gotten involved in a lot of
student organizations including honors
organizations, the African Students Association
and Intramural Soccer and Basketball. The
community is very friendly, and it is easy for
every student to find his or her niche. Since
international students don't qualify for many
scholarships because of citizenship, it would be
wonderful to receive support for international
students."
</p>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center; width:20%; background-image:url('Pictures/Footer_New.jpg')" class="style6" >
<div id="table1"> <table id="table1" style="border-collapse:collapse; width:960px">
<tbody>
<tr>
<td style="text-align:right;font-family:Calibri;margin-bottom:0px; ,margin-top:0px" valign="bottom" >
<p style="font-family:Calibri;font-size:20pt; text-align:center;margin-bottom:0px;margin-top:0px" >
<a href="https://secure.truman.edu/alumni-s/contribution_new.asp" style="text-decoration:none; color:black">
Make a Contribution
<span style="color: #FA7042; font-weight:bolder">
TODAY!
</span>
<span style="text-decoration: underline">
<br/>click here
</span>
</a>
</p>
</td>
<td style="text-align:right;font-family:Calibri;">
<span style="font-size:14pt;font-weight:bold; padding-right:40px">
Truman State University
</span> <br />
<span style="font-size:12pt">
Office of Advancement | McClain Hall 205 <br />
100 E. Normal Avenue |Kirksville, MO 65301</span>
</td>
<td style="font-family:Calibri;border-left-style: solid;border-left-width: 1px; margin-left:10px; text-align:left">
<span style="font-size:14pt;font-weight:bold;padding-left:50px">
<a href="www.truman.edu">
www.truman.edu
</a>
</span>
<br />
<span style="font-size:12pt; margin-left:5px;">
(660) 785-4133 or (800) 452-6678
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#2BA7D0; margin-right:0px; height:100%" id="outer" class="style3">
<br />
<br />
</td>
</tr>
</table>
</div>
</body>
</html>
I suggest the following for you main div and body style:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal-
HomepageColor.jpg'); clip:auto; overflow:hidden;">
<div style="margin:0px auto">.....
Ok and for the content: Why do you have so many Divs inside your table? The use of a table defeats the need for using a Div in most cases, so I suggest you take out all the divs in the table. If you want something to behave like a block element such as the images, set display: block or inline-block.
As for all the dimensions: You defined too many widths and heights. Do not assign the widths in pixels to the td tags, the size of the images will do their job. You can specify their dimensions. Try that and let me know.
"for some reason a couple of the pages do not align correctly in firefox and opera"
You can quikly fix that problem by adjusting this part of your code:
CHANGE THIS:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:absolute; height:100%; margin:0px auto">
TO:
<body style="margin: 0; background-image: url('Pictures/InternationalAppeal- HomepageColor.jpg'); width:100%; height:100%; clip:auto; overflow:hidden;">
<div style=" position:relative; height:100%; margin:0px auto">
The issue is that if you give position:absolute; your are removing the element from the normal document work-flow, thus causing the margin: 0 auto; to be meaningless.
What I did was to change the position:absolute; to position:relative; thus having the margin:0 auto; being "respected" by the browser.
EDITED
To solve the mentioned issue on your comment, you just need to set the html height to 100%;.
CSS
html {
height: 100%;
}
Note: This will tell the browser that the document has a height of 100%, thus causing the body and body>div height of 100% to extend till the end of the document.
I have a form which is presented in a table. In the third column, there are 4 rows for selecting the preferred method of contact (radio buttons). I'm currently using a label to write this text in the first row. I'm told, however, it doesn't look as nice as using a custom image.
The image is supposed to sit nicely amongst the form content with an arrow pointing to these radio buttons. I figured the easiest way to do this would be to set a fixed width on the columns then set the table's background image to the image I've been given and position it (with background-position) to where it should sit. With the column widths set, there shouldn't be a problem of alignment.
Any other ideas on how to do this?
My suggestion: instead of putting the background on the table, put the background on a table cell with rowspan=3, meaning it will cover the area to the right of all three radio buttons. Here's an HTML sample illustrating the technique. Note that you'll need to carefully size each column (and the enclosing table) to make sure your image fits in properly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
table.contactForm
{
background-color:#EBF3F7;
width:681px;
}
table.contactForm td
{
text-align:left;
padding-top:5px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
white-space:nowrap;
height:25px;
}
table.contactForm td.first
{
width:200px;
}
table.contactForm label
{
padding-left:5px;
}
table.contactForm td.second
{
width:200px;
text-align:right;
}
table.contactForm td input[type=text]
{
width:180px;
}
table.contactForm td.third
{
width:20px;
text-align:right;
}
table.contactForm td.imageArrows
{
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position:left center;
width:261px;
height:78px;
padding:0px;
}
</style>
</head>
<body>
<table class="contactForm">
<tr>
<td class="first"><label for="FullName">Full Name</label></td>
<td class="second"><input type="text" name="FullName" /></td>
<td></td>
</tr>
<tr><td colspan="4"><br/></td></tr>
<tr>
<td class="first"><label for="Phone">Phone</label></td>
<td class="second"><input type="text" name="Phone" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
<td rowspan="3" class="imageArrows"></td>
</tr>
<tr>
<td class="first"><label for="Mobile">Mobile</label></td>
<td class="second"><input type="text" name="Mobile" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
<tr>
<td class="first"><label for="Email">Email</label></td>
<td class="second"><input type="text" name="Email" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
</table>
</body>
</html>