I am trying to get this table on my site to have an image on the left and information about the staff member on the left. It is in a WordPress page but regardless of weather it's on the page or in a standalone HTML document it doesn't seem to render the way I want it to.
It's supposed to follow the same general idea as http://grab.by/djQk.
I attempted to copy their source but couldn't get it to render so I pulled their source from my site and started from scratch and still couldn't get it working.
http://radio.powercastmedia.net/staff/
I have implemented what you need using CSS instead of tables.
See this JSFiddle
Cheers, Sam
If you're using tables....
<table>
<tr>
<td style="width: 25%;">
<img src="blah"/>
</td>
<td>
<table>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
<td>
</tr>
</table>
Note: the problem with your pastebin example is that you're using <tr> inside a <td> which is incorrect - <tr> can only go inside a table so you need additional table tags.
It's also possible to do with a single table using colspan and rowspan on individual cells, but I'd personally prefer to do it by making the image a float left eg:
<div>
<img src="blah" style="float: left;"/>
<p>Name: John</p>
<p>Something else</p>
</div>
Related
I'll admit, I'm not very experienced with writing code in general - I do it on a per-needed basis. Our company is researching different frameworks for writing code for emails. We stumbled across Zurb Foundation. I thought, great, it will make writing a lot less convoluted. Then, while going through the tutorials, I see this for making JUST A BUTTON:
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>
<center data-parsed="">
<table class="button float-center">
<tr>
<td>
<table>
<tr>
<td>Centered Button</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
WHY..?? Why does it seem that in coding everything has to a table within a table within a table header, within a table row, within a table cell, within a table row. It goes on forever and literally makes me angry when I look at that. I don't see why making a simple button cannot be 1 line of text, that's it.
Why does code have to be so long and convoluted for the simplest things?
Foundation Emails uses Inky - a custom template language (like all other email frameworks), which generates this for you.
https://foundation.zurb.com/emails/docs/inky.html
Emails are a different beast and if you hand write tables this is common. As Daniel pointed out, Inky is the way to avoid this mess.
I have a table formatted as:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
How can I get them to both display from the top of 'tr'? I assume there's a way to stop automatic vertical alignment with CSS?
To clarify for future viewers, I got it working using:
CSS:
td {
vertical-align: top;
}
HTML:
<table>
<tr>
<td>
Long list of info
Line two
</td>
<td>
Shorter list of info
</td>
</tr>
</table>
(Here's the fiddle)
Hey if you have some questions how to use tables pls look some examples here
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/css/css_table.asp
If you prefer to avoid CSS you can do the same thing inline with the depreciated valign tag. Valign is not supported in HTML5 but is the recommended method if you are working within the context of an HTML email.
<table border="1">
<tr>
<td width="110">
Long list of info Line two
</td>
<td valign="top">
Shorter list of info
</td>
</tr>
</table>
Or you could always use two rows if you can predict and control where your breaks are going to be and want to simplify the markup further.
EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I read here that a td tag must be nested, so I'm confused when I see the ItemTemplate property tag of a ListView looking like this:
<ItemTemplate>
<td id="Td2" runat="server">
<table>
<tr>
<td> </td>
<td>
<a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
<img src="/Catalog/Images/Thumbs/<%#:Item.ImagePath%>"
width="100" height="75" /></a>
</td>
<td>
<a href="ProductDetails.aspx?productID=<%#:Item.ProductID%>">
<span class="ProductName">
<%#:Item.ProductName%>
</span>
</a>
<br />
<span class="ProductPrice">
<b>Price: </b><%#:String.Format("{0:c}", Item.UnitPrice)%>
</span>
<br />
</td>
</tr>
</table>
</td>
</ItemTemplate>
Does this have to do with the fact that ListView inherits from some class and implements a ton of interfaces? Or does it have to do with some aspect of ItemTemplate that I'm not familiar with? Is my source wrong or is it "just an ASP thing"?
I don't know what your LayoutTemplate looks like but this really has nothing to do with the ListView per se but more with the HTML layout that the developer chose. td's best belong inside a tr but these are just tags. You can change the css and redefine however you want. The browser will then interpret it and display it and then you get to deal with the aftermath of your choices =).
A possible way the code above makes sense is:
<LayoutTemplate>
<table border="0" cellpadding="1">
<tr>
<th>Product</th>
</tr>
<tr>
<td id="itemPlaceholder" runat="server"></td>
</tr>
</table>
</LayoutTemplate>
This would make a single column outer table with a product heading and then each row of that table would contain your inner table (per product) above.
It's just the way asp.net has you define your controls. Once the asp.net page is rendered (converted to pure html), those td elements should be nested in a tr. You can see the output by viewing the source of the page in your browser.
I created a design for my website. I am planning to make it with TABLES because it seems to be the easiest. The tables are not going the way I intended.
There was a problem putting the code on the page so I put my HTML document (.html) and the way I want it to look (.jpg) in the below zip-file link:
http://ericlounge.host22.com/000/22014/0aa.zip
If someone could give me the code or explain my error that would be great!
I would avoid using tables, but it's your choice.
<Table>
<TR>
<TD rowspan ="3">
Navigation
</TD>
<TD>
TITLE
</TD>
<TD rowspan ="3">
SideBar
</TD
</TR>
<TR>
<TD>
ADS
</TD>
</TR>
<TR>
<TD>
Content
</TD>
</TR>
</Table>
This does not answer your question, however, it will give you reasons why you should look at a different approach for your layout/design rather than tables.
Why not use tables for layout in HTML?
To counteract the "tables is the easiest" option then have a look at Yahoo's YUI templates and examples. These can probably produce exactly what you are after with little effort.
http://developer.yahoo.com/yui/grids/