I know very little html and pretty much no css. I would like to know the easiest way for me to change my left aligned text to center aligned within the cells. Someone on stackoverflow helped me to figure out how to center a table on my wordpress page with the following code:
<div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<table border="0">
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I now need to figure out how to center the text within the cells. I have tried using align="center" beside the td. This showed the text centered in the wordpress admin area, but on the actual webpage, the text was still left aligned. Another guy recommended I put something in my header code and link it to the something. Again, I know very little about this and would appreciate the easiest solution. Thx.
Add the following CSS (CSS has to be added within <style> tags):
<style>
td {
vertical-align: middle;
text-align: center;
}
</style>
Also.. remove one of the <table> tags:
<table style="margin:0px auto;" border="0">
<table border="0">
should be
<table style="margin:0px auto;" border="0">
<td style="text-align:center"></td>
If you want every cell centered, the easiest solution for you is to add the above to every cell.
you dont need the div above or the style in the table tag, and only one table tag :)
<table>
<tr>
<td style="text-align:center">centered text</td>
</tr>
</table>
Here are two simple ways:
<td align="left">foo</td>
<td style="text-align:left;">foo</td>
EDIT
As others have mentioned, you also need to remove the nested <table> tags.
Related
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/
I'm creating a table in html. Wanted the table to come out at the center of the screen, and found this question showing me exactly how to center the table in HTML.
However, as much as it did help make my table appear at the center of the screen, it also added an additional row, atop the first row when I added these lines to my code:
<table border="1px" align="center">
<td align=center valign=center>
Here's a preview of my current table (with slight distortions):
<head>
<style>
table, th, td {
border:1px solid black;
}
</style>
</head>
<body>
<table border="1px" align="center">
<td align=center valign=center>
<col style="width: 200px" />
<col style="width: 300px" span="2" />
<tr>
<th scope="row">Degree</th>
<td colspan="2">Bachelor of Multimedia</td>
</tr>
<tr>
<th scope="row">University</th>
<td colspan="2">Universiti Utara Malaysia</td>
</tr>
<tr>
<th rowspan="2">Contact</th>
<th>Telephone</th>
<th>Email</th>
</tr>
<tr align="center">
<td>019-xxxxxxx</td>
<td>blah#gmail.com</td>
</tr>
</table>
</body>
You don't need the second line of code you added you jsut need
<table border="1px" align="center">
Remove
<td align=center valign=center>
FIDDLE
The best way to have a table centered in a page is using the margin:0 auto in your CSS. If you want to use it inline(not a recommendation), use it this way: style="margin:0 auto".
Try to use CSS property instead of border, align or valign.
But your real proble come from this line td align=center valign=center>. A td is a column that need to be in a tr(a row). But in fact, yo do not even need this line.
Hope this help!
Just remove the 2nd line of your code:
<td align=center valign=center>
and it should work, here is a fiddle
I built an HTML table:
<table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable">
<thead>
<tr>
<th class="asc" width="30"><h3>ID</h3></th>
<th width="200"><h3>Name</h3></th>
<th width="200"><h3>Artist</h3></th>
<th width="150"><h3>Album</h3></th>
<th width="60"><h3>Time</h3></th>
</tr>
</thead>
<tr class="evenrw">
<td class="evensl" align="center">i++</td>
<td align="left">link name</td>
<td align="left">name</td>
<td align="left">name</td>
<td align="center">name</td>
<tr>
<table>
the problem is that when I put something in a row so that the whole table becomes bigger, Is there anyway to make the height of the cell bigger instead the width of the cell?
You have a table width set as 1000px, and individual table columns set to a total with of around 600px. Tables a bit confusing with widths so remove the style="1000px" and that should fix the problem
jsfiddle example
If the answer works, please mark it as the chosen answer :)
PART TWO
To add a banner above the table, simply add another <div> above the table. So it would be
<div id="banner_or_something">
<!-- INSERT BANNER CODE HERE-->
</div>
<table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable">
<!--TABLE CODE HERE-->
</table>
Use CSS div & class with td tags will help you.
e.g.
.aaa td{
width:200px;
/* all attributes you want*/
}
i hope it will help you
I have a table defined as
<table border="1" width="200px" height="auto">
<tr>
<td></td>
</tr>
</table>
Is there a way that I can align the table at the center of the page, apply background color to page without using css for any of these operations?
I assume you are doing something horrible like HTML email:
<center><table bgcolor="#ff00ff"></table></center>
<center>
<table border="1" cellspacing="0" cellpadding="0" width="200" align="center">
<tr>
<td background="http://www.yourdomain.com/email/images/background.jpg" align="left">
<!-- Stuff -->
</td>
</tr>
</table>
</center>
http://www.email-standards.org/
http://mailchimp.com/resources/guides/email-marketing-field-guide/
http://www.1stwebdesigner.com/tutorials/ultimate-guide-html-emails/
The background attribute was never valid on table or td. Pretty sure the only thing the HTML 4 specification had background on was body. But I vaguely recall that it worked elsewhere and I think table cells was elsewhere--whether it works in Outlook you'll just have to test. bgcolor was valid all of those places...and is likely to work.
Got this simple piece of html code and I want to make the TEST (third <td> component) align to the bottom of the row but it stays up no matter what I try.
I know there are thousands of questions of this sort and I read 3-4 articles but non of the stuff I tried works.
<table border="0">
<tr>
<td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143"
height="123"></td>
<td width="775">
<h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1>
</td>
<td style="float:right;vertical-align:text-bottom">
TEST
</td>
</tr>
</table>
Thanks!
<td valign="bottom">
should work
Just remove the float and make it vertical-align: bottom and it'll fall to the abyss!
How about:
<table border="0">
<tr>
<td width="144" height="125"><img src="images/logo.png" alt="CommuniTake" width="143"
height="123"></td>
<td width="775">
<h1><h:outputText value="#{msg.General_Configuration_Title}" /></h1>
</td>
<td valign="bottom">
TEST
</td>
</tr>
</table>
From W3Schools:
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
Might be that this td does not have a parent element, which has font to align to. Using simple 'bottom', as suggested by others, would align to lowest element on the same line.