I am trying to setup tables so the result outcomes like this:
Code:
<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
<tr style="background: #686868 ;">
<td align="center" valign="top" width="240" height="25" style="border:1px #FFF solid;">About me</td>
</tr>
<tr>
<td align="left" valign="top" width="250" height="112" style="">
Points:<br>
Lalala: <br>
Lalala: <br>
</td>
<td align="left" valign="top" width="250" height="112" style="">
Lalala: <br>
Lalala:
</tr>
</table>
Can't get it to work like how I wanted.
The problem I get with my code is that "About me" only covers for the first cell and not the other.
You need colspan="2" in the <td> of the first row so that it spans two columns.
Semantically, you would like to use <th> (table heading) instead of <td> as well.
See also:
HTML table tutorial
This should do the trick:
<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
<tr style="background: #686868 ;">
<td align="center" valign="top" colspan="2" width="240" height="25" style="border:1px #FFF solid;" >
About me
</td>
</tr>
<tr>
<td align="left" valign="top" width="250" height="112" style="">
Points:<br>
Lalala: <br>
Lalala: <br>
</td>
<td align="left" valign="top" width="250" height="112" style="">
Lalala: <br>
Lalala:
</td>
</tr>
</table>
Note the colspan attribute on the first <td> tag - this will ensure that it spans the width of two columns.
Additionally, you might also like to expand your table to contain the thead and tbody elements, providing separation between the different sections of content:
<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
<thead>
<tr style="background: #686868 ;">
<th align="center" valign="top" colspan="2" width="240" height="25" style="border:1px #FFF solid;" >
About me
</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" valign="top" width="250" height="112" style="">
Points:<br>
Lalala: <br>
Lalala: <br>
</td>
<td align="left" valign="top" width="250" height="112" style="">
Lalala: <br>
Lalala:
</td>
</tr>
</tbody>
</table>
Related
I am coding a menubar for an e-mail - therefore the messy tables. I need the two menuoptions "Point" and "My profile" to be aligned in the right side of the table:
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JSFIDDLE
I have tried to set a text-align:right; on the a tag, the td tag, but I cannot get the two options to align right.
I can align them right if I set the text-align on the table. But then all the text are aligned right.
Does anybody have an idea what I am doing wrong here?
I think this will work for you -
I have put the inner table width to 100% and split you <a> tag to two <td> and gave them float.
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse;width:100%" cellspacing="0" cellpadding="0" border="0" align="left" width: "100%">
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8;float:left" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
</td>
<td style="float:right">
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Hope this is helpfull for you.
try this snippet:
<a href="http://example.com"
style=
"color:#004b60;
text-decoration:none;
background-color: red;
padding: 5px 10px 5px 10px;
margin-left:250px;"
target="_blank"><b>Point:</b>
</a>
use margin-left:250px; instead of text-align: right;
check the fiddle: https://jsfiddle.net/hfsd62eg/1/
I'm trying to get the image to align to the right and the rows with text on the left in my table using colspan. This method usually works when the image is on the left but now I want it on the right it wont work. Please keep in mind this is for outlook email so you cannot use floats, align="right" etc.
heres my code:
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="580" style="border: 1px solid;">
<tr>
<td style="font-size: 10px;">sdfsdfsdfsdfdsdfhhhhhhhhlklkjlkj</td>
<td></td>
</tr>
<tr>
<td>sdfsdf</td>
</tr>
<tr>
<td rowspan="3" ><img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400"></td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/yk3fanoq/1/
You need to put the text and image in two columns (td)
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<tr>
<td align="left">
sdfsdfsdfsdfdsdfhhhhhhhhlklk
sdfsdf
</td>
<td rowspan="3" align="right">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400">
</td>
</tr>
</td>
</tr>
</table>
Without a heading, my table looks fine and normal. I tried adding a table heading and it pushed everything out of place. Could anyone tell me how to avoid this?
Relevant code:
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="white">
<th width="80%"> Let's talk about the wall </th>
<tr>
<td width="6%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
<td width="75%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
<td width="19%" align="center" bgcolor="white"><font face="arial"><strong></strong></font></td>
</tr>
And then:
<tr>
<td bgcolor="white"><font face="arial"></font></td>
<td bgcolor="white"><font face="arial"><? echo $rows['topic']; ?><BR></font></td>
<td align="center" bgcolor="white"><font face="arial"></font></td>
</tr>
To be clear, the text you see such as 'test,' 'slaaa,' etc. - I want that to be aligned much farther to the left of where it sits, which is how it sits when I have the table without a heading.
You're missing a tr wrapping the th, and a colspan
th {
background: #ccc;
}
td {
background: #aaa;
}
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="white">
<tr>
<th colspan="3"> Let's talk about the wall</th>
</tr>
<tr>
<td width="6%" align="center" bgcolor="white">
<strong>some text</strong>
</td>
<td width="75%" align="center" bgcolor="white">
<strong>Column 2</strong>
</td>
<td width="19%" align="center" bgcolor="white">
<strong>Column 3</strong>
</td>
</tr>
When scripting automation with Selenium, I tried to locate a required web element with css selector, and I used the firebug to get the unique css path for that element. However, I was surprise since sometimes the firebug give me an incorrect css path although it works with selenium indeed.
<table width="100%" cellspacing="1" cellpadding="4" border="0" class="forumline">
<tbody><tr>
<th nowrap="nowrap" height="25" align="center" colspan="2" class="thcornerl"> Topic </th>
<th width="50" nowrap="nowrap" align="center" class="thtop"> Answers </th>
<th width="100" nowrap="nowrap" align="center" class="thtop"> Author </th>
<th width="50" nowrap="nowrap" align="center" class="thtop"> Views </th>
<th nowrap="nowrap" align="center" class="thcornerr"> Last message </th>
</tr>
<!-- TOPICS LISTING -->
<tr class="bg_small_yellow">
<td width="20" valign="middle" align="center" class="row1Announce"> <img alt="" src="/jforum/images/transp.gif" class="icon_folder_announce">
<span class="topictitle">
<a href="/jforum/posts/list/2.page">
Support JForum - Please read
</a>
</span>
</td>
<td valign="middle" align="center" class="row2Announce"><span class="postdetails">0</span></td>
<td valign="middle" align="center" class="row3Announce">
<span class="name">Admin</span>
</td>
<td valign="middle" align="center" class="row2Announce"><span class="postdetails">4</span></td>
<td valign="middle" nowrap="nowrap" align="center" class="row3Announce">
<span class="postdetails">20/03/2016 13:58:24<br>
Admin
<img border="0" alt="[Latest Reply]" src="/jforum/templates/default/images/icon_latest_reply.gif"></span>
</td>
</tr>
<tr class="bg_small_yellow">
<td width="20" valign="middle" align="center" class="row1"> <img alt="" src="/jforum/images/transp.gif" class="icon_folder">
<span class="topictitle">
<a href="/jforum/posts/list/3.page">
[Poll]
Which one is your favorite?
</a>
</span>
</td>
<td valign="middle" align="center" class="row2"><span class="postdetails">0</span></td>
<td valign="middle" align="center" class="row3">
<span class="name">yinzhenzhixin</span>
</td>
<td valign="middle" align="center" class="row2"><span class="postdetails">8</span></td>
<td valign="middle" nowrap="nowrap" align="center" class="row3">
<span class="postdetails">20/03/2016 14:34:25<br>
yinzhenzhixin
<img border="0" alt="[Latest Reply]" src="/jforum/templates/default/images/icon_latest_reply.gif"></span>
</td>
</tr>
<tr class="bg_small_yellow">
<td width="20" valign="middle" align="center" class="row1"> <img alt="" src="/jforum/images/transp.gif" class="icon_folder">
<span class="topictitle">
<a href="/jforum/posts/list/1.page">
Welcome to JForum
</a>
</span>
</td>
<td valign="middle" align="center" class="row2"><span class="postdetails">1</span></td>
<td valign="middle" align="center" class="row3">
<span class="name">Admin</span>
</td>
<td valign="middle" align="center" class="row2"><span class="postdetails">6</span></td>
<td valign="middle" nowrap="nowrap" align="center" class="row3">
<span class="postdetails">20/03/2016 14:09:51<br>
yinzhenzhixin
<img border="0" alt="[Latest Reply]" src="/jforum/templates/default/images/icon_latest_reply.gif"></span>
</td>
</tr>
<!-- END OF TOPICS LISTING -->
<tr align="center">
<td valign="middle" height="28" align="right" colspan="6" class="catbottom">
<table cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td align="center"><span class="gensmall"> </span></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I need the span which under the third tr whose class name is "bg_small_yellow". However, the firebug give me the unique css path as "tr.bg_small_yellow:nth-child(4) > td:nth-child(2) .topictitle > a:nth-child(1)", you see there are only 3 bg_small_yellow in total. where is the 4th one? How does it work?
You can use unique X Paths to access web elements.
Selenium Command
Hope the above mentioned link helps to solve your problem!
I am trying to create a "cool" email signature for my company using only text and html with NO images whatsoever. I am trying to recreate our company's logo using only tables since it is basically a four cell table with different bg colors. What seemed easy at first has become quite a nuisance. It obviously looks good in browsers but once I paste it into Outlook 2013 the cells don't retain their height and width values. Any suggestions on how to make this work across most current email clients??
http://codepen.io/anon/pen/wqaLm
Firstly, a good technique is to style your cells inline like:
<td style="width:10px; height:10px;">
Secondly: have a look at this article: "A complete breakdown of the CSS support for every popular mobile, web and desktop email client"
Here is a basic example. Not sure exactly what the logo looks like, so here are a few versions. If you want to have the gap between the cells smaller than 20px, you need to use the 3rd technique. This is because Outlook has a min-height on cells of around 19px which will create a larger gap between the rows.
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50" bgcolor="#333333">
</td>
<td width="50" height="50" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#444444">
</td>
<td width="50" height="50" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="40" bgcolor="#333333">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="40" height="20">
</td>
<td width="20" height="20">
</td>
<td width="40" height="20">
</td>
</tr>
<tr>
<td width="40" height="40" bgcolor="#444444">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" height="30" align="left" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#333333">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#555555">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" height="30" align="left" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#444444">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#666666">
</td>
</tr>
</table>
</td>
</tr>
</table>