I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>
Related
I am using DocuSign sandbox(test) environment to send HTML documents for digital signature.
As i understand it, Docusign converts all document types to PDF. This process seems to be causing rendering issues for my HTML document, specifically for column structures. I've tried using "Float", "Inline-Block", and "Flex" for displaying columns and all fail to get rendered properly by DocuSign.
Here is what the HTML looks like BEFORE going through DocuSign This is using Flex to create the two 'columns':
And here is what the HTML looks like AFTER going through DocuSign. Notice the columns are gone.
EDIT: Here is the HTML code
<!DOCTYPE html>
<html>
<head lang="en">
<style>
#wrapper{
display: flex;
}
#contact-left{
flex: 1;
}
#contact-right{
flex: 1
}
.anchor-tags{
color:white
}
</style>
<title>Docusign Template</title>
</head>
<body>
<div id="wrapper">
<div id="contact-left">
<h3>Date:</h3>
<h3>Contact Name:</h3>
<h3>Firm Name: ("Broker")</h3><span class="anchor-tags">franklinrepsig</span>
<h3>Lender: ("Assignor")</h3>
</div>
<div id="contact-right">
<h3>Phone No:</h3>
<h3>Fax No:</h3>
<h3>Date: </h3><span class="anchor-tags">assigneedate</span>
</div>
</div>
</body>
</html>
Using HTML tables is rendering the document correctly. Please try the following
<!DOCTYPE html>
<html>
<head lang="en">
<style>
.anchor-tags {
color: white;
}
</style>
<title>Docusign Template</title>
</head>
<body>
<table style="width:100%">
<tr>
<td width="35%"><h3>Date:</h3></td>
<td width="35%"></td>
<td width="15%"><h3>Phone No:</h3></td>
<td></td>
</tr>
<tr>
<td><h3>Contact Name:</h3></td>
<td></td>
<td><h3>Fax No:</h3></td>
<td></td>
</tr>
<tr>
<td><h3>Firm Name: ("Broker")</h3></td>
<td><span class="anchor-tags">franklinrepsig</span></td>
<td><h3>Date: </h3></td>
<td><span class="anchor-tags">assigneedate</span></td>
</tr>
<tr>
<td><h3>Lender: ("Assignor")</h3></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I have a table with 2 columns and on each column I have a different size of font (the bigger size font also strong).
My problem is the vertical alignment of the text: it doesn't align vertically (see the image):
Here's my html code:
<html>
<head>
<style>
.big-text-size {
font-size: 3.5em;
}
.small-text-size {
font-size: 1.1em;
}
</style>
</head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Any suggestions why does it happen?
Tweak the vertical alignment of your different-size-text (see here):
<html>
<head><style>
.big-text-size {
font-size: 3.5em;
vertical-align: text-bottom;
}
.small-text-size {
font-size: 1.1em;
vertical-align: text-bottom;
}
</style></head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Your second table doesn't have any rows...
<table>
<tr> <!-- Missing -->
<td class="small-text-size">Daniel Boro</td>
<td class="big-text-size"><strong>My doctor's name</strong></td>
</tr>
</table>
try including rows in your table..
you can also visit this site http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html It provides 4 CSS tricks that you can use to align text vertically in a table cell
I'm getting white spaces at the top of my form and I believe I have tried everything but, it's still there. Can someone give some sugesstions at to how to get rid of the white space at the top? When I open the form in firefox it seems to be okay but, when I use IE I get white space. Also, it is a .cfm form. Thanks.
Here is my code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.body
{
margin-top:0px;
padding-top:0px;
}
.mytable1
{
border-collapse:collapse;
border-color:#000000;
border-style:solid;
border-width:2px;
}
.mytable1 th
{
border-color:#333333;
border-style:solid;
border-width:1px;
}
.mytable1 td
{
border-color:#333333;
border-style:solid;
border-width:1px;
}
.mytable1
{
border-collapse:collapse;
border-color:#000000;
border-style:solid;
border-width:2px;
}
</style>
</head>
<body lang=EN-US style='tab-interval:.5in'>
<div id=Section1>
<cfoutput>
<form name="reportform" action="UpdateFormStatus.cfm" method="post">
<input type="hidden" name="UserEmail" value="#search_review.UserEmail#">
<table class="mytable1">
<tr>
<td valign="top" class="blacktext" align="center" colspan="14"><strong>Review Form</strong></td>
</tr>
<tr>
<td valign="top" class="blacktext" colspan="4"><strong>Type:</strong> #form.Type# </td>
<td valign="top" class="blacktext" colspan="4"><strong>Number: </strong> #form.Number# </td>
</tr>
<cfif not search_results.RecordCount>
<tr>
<td class="blacktextbold" colspan="2"> No results match those criteria.</td>
<td align="left" colspan="1">Search Again</td>
</tr>
<cfelse>
<tr>
<td valign="top" colspan="3" class="blacktext"><strong>Name:</strong> #form.Name# </td>
<td valign="top" colspan="3" class="blacktext"><strong>Project Code: </strong> #form.ProjectCode# </td>
</tr>
</table>
</form>
</cfoutput>
</body>
</html>
You have put body in as a class
is should be:
body{
margin-top:0px;
padding-top:0px;
}
For an ID you use # for a class you use . and if you are going to target an object like a div you just put div
You should put the margin and padding from the html as well to 0 and remove the . from the body selector:
html, body
{
margin-top:0px;
padding-top:0px;
}
It looks like you're missing the closing tag for cfif. The browser is trying to fix your html and is putting this tag above the table. You also don't have a closing tag for the div with id="Section1". CFML is not the same as HTML btw. This will not render properly as HTML because of the Cold Fusion specific tags.
You didn't close the parent div. <div id="Section1"> Also, as #Andrew mentioned, you had body set as a class. (body {} instead of .body{}).
http://jsfiddle.net/fKMHe/
To remove the margin and padding from the form element just add this:
form
{
margin: 0px;
padding: 0px;
}
Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).
How can entire table cell be hyperlinked in html without javascript or jquery?
I tried to put href in td tag itself but its not working at least in chrome 18
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.
Try this way:
<td> </td>
Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>
Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.
<td onclick="location.href='yourpage.html'">Link</td>
Here is my solution:
<td>
<div class="item-container">
<img class="icon" src="/iconURL" />
<p class="name">
SomeText
</p>
</div>
</td>
(LESS)
td {
padding: 1%;
vertical-align: bottom;
position:relative;
a {
height: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
.item-container {
/*...*/
}
}
Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)
Problems:
(User: Kamal) It's a good way, but you forgot the vertical align problem! using this way, we can't put the link exactly at the center of the TD element! even with vertical-align:middle;
(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...
My Suggestion to complete answer of (User: Christ):
HTML:
<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>
CSS:
a.LN1 {
font-style:normal;
font-weight:bold;
font-size:1.0em;
}
a.LN2:link {
color:#A4DCF5;
text-decoration:none;
}
a.LN3:visited {
color:#A4DCF5;
text-decoration:none;
}
a.LN4:hover {
color:#A4DCF5;
text-decoration:none;
}
a.LN5:active {
color:#A4DCF5;
text-decoration:none;
}
you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}
I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.
<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>
Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.
<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
<table style="margin-left: auto; margin-right: auto;" align="center">
<tr>
<td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
</tr>
</table>
</a>
If you want use this way in php Do the following
<?php
echo ("
<script type = 'text/javascript'>
function href() {
location.href='http://localhost/dept';
}
</script>
<tr onclick='href()'>
<td>$id</td>
<td>$deptValue</td>
<td> $month </td>
<td>100%</td>
</tr>
");
?>