Can I use HTML5 elements to outline code on a "page" that uses a table for formatting? For Example:
<section id="posts">
<tr id="posts-title-row">
<header><td id="posts-title">
<h2>Latest Posts</h2>
</td></header>
</tr>
<tr id="posts-row">
<article><td>
<p>Maecenas faucibus mollis interdum.</p>
</td></article>
<article><td>
<p>Maecenas faucibus mollis interdum.</p>
</td></article>
<article><td>
<p>Maecenas faucibus mollis interdum.</p>
</td></article>
</tr>
</section>
In general, I understand that this is extremely poor form, but until email clients (esp. Gmail) support CSS3 formatting of emails, there is little other option, except to use tables to format HTML emails (e.g. newsletters). However for my own semantic peace of mind, I'd like to use < section >, < article > and < header > type elements to organize things.
If it's the semantics you care about you could just use the ARIA roles defined for <section> and <article> on the existing elements:
<table id="posts" aria-role="region">
<tr id="posts-title-row">
<td id="posts-title" aria-role="banner">
<h2>Latest Posts</h2>
</td>
</tr>
<tr id="posts-row">
<td aria-role="article">
<p>
Maecenas faucibus mollis interdum.
</p>
</td>
<td aria-role="article">
<p>
Maecenas faucibus mollis interdum.
</p>
</td>
<td aria-role="article">
<p>
Maecenas faucibus mollis interdum.
</p>
</td>
</tr>
</table>
You can, but you have the elements in the wrong place. They need to be inside the <td>s. You also need to wrap the entire table in a <table>
<section id="posts">
<table>
<tr id="posts-title-row">
<td id="posts-title">
<header>
<h2>Latest Posts</h2>
</header></td>
</tr>
<tr id="posts-row">
<td>
<article>
<p>
Maecenas faucibus mollis interdum.
</p>
</article></td>
<td>
<article>
<p>
Maecenas faucibus mollis interdum.
</p>
</article></td>
<td>
<article>
<p>
Maecenas faucibus mollis interdum.
</p>
</article></td>
</tr>
</table>
</section>
Well, you can use HTML5 tags with table formatting as long as your e-mail service accept it. However, you can try using CSS (note that I haven't said CSS3) to give style to your page. And always remember inline styles!
Using table formatting in 2013 is like going in carriage to work, but when talking about e-mail services it still being the town sheriff.
Good luck!
Related
This HTML works fine in any editor, but when I send a sample email to the gmail based on this html Background moves to the center:
</head>
<body style="padding: 0 25px;background: linear-gradient(to bottom, red 80px, black 0%) no-repeat top / auto;background-size: 900px 1020px;">
<header>
HTML email is 1990's style web design, but with mobile support and some limited opportunity for progressive design. So it's going to need a complete redesign.
Some no no's:
Don't set a width greater than about 280px (or less if you have padding). Mobiles won't be responsive with that.
Linear-gradient could work on some platforms, but not on others. For this gradient, which is not even a gradual change, use the bgcolor attribute or background-color style.
You may have issues with the <body> tag, as it gets replaced or used weirdly in different email clients. Put your work in a table.
Don't use <header> and other more modern HTML/CSS, unless you have a fallback for email clients that don't support it.
You could start with something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
</head>
<body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#ffffff;">
<!-- START OUTER WRAPPER -->
<center style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<div style="max-width:600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;margin:0 auto;width:100%;max-width:600px;">
<!-- END OUTER WRAPPER -->
<!-- START SINGLE COLUMN v1 -->
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;">
<table width="100%" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;">
<!-- START TEXT -->
<tr>
<td bgcolor="red" style="border-collapse:collapse;padding:10px;width:100%;text-align:left;height:80px;">
<p style="margin:0;font-size:14px;margin-bottom:10px;"> </p>
</td>
</tr>
<tr>
<td bgcolor="black" style="border-collapse:collapse;padding:10px;width:100%;text-align:left;color:#fff">
<p style="margin:0;font-size:16px;">This is another paragraph. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END SINGLE COLUMN v1 -->
<!-- START OUTER WRAPPER -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
<!-- END OUTER WRAPPER -->
</body>
</html>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" style="background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);">
<tr>
<td style="color:#ffffff;">In the table, you can give background. Make sure gradient background will not render in Outlook email browser. Instead of linear background, you can give image in the background. </td>
</tr>
</table>
</body>
I am using this pre-made profile code. They have given me the html code to it. So I tried using it. And all it gave me was the wrong display. I have linked the picture of what it should be displayed as. And to what it is displaying when I use it.
Also sorry if the code is a little wonky. I just got started with it. Thanks to whom ever helps me!
What it should display as
What it does instead.
Code:
<div class="container">
<div class="row clearfix well">
<div class="col-md-2 column">
<img class="img-thumbnail" alt="140x140"
src="http://lorempixel.com/140/140/" />
</div>
<div class="col-md-8 column">
<blockquote>
<p>
Potter Guy
</p> <small>21 / M / Single / Straight <cite>London
England</cite></small>
</blockquote>
</div>
<div class="col-md-2 column">
<button class="btn btn-default btn-block" type="button">
Poke
</button>
<button class="btn btn-default btn-block" type="button">
Message
</button>
<button class="btn btn-default btn-block" type="button">
Save
</button>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-444468">
<ul class="nav nav-tabs">
<li class="active">
About
</li>
<li>
Photos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-200304">
<div class="row clearfix">
<div class="col-md-8 column">
<p>
<strong>About me</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>What i am doing with my
life</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>I am really good at ?</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>The first thing you will notice
about me?</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>I cant live without ?</strong><br/>
My Mobile
My Car
My Dog
</p>
<hr/>
<p class="well">
<strong>I am looking for ?</strong><br/>
someone good with heart
</p>
</div>
<div class="col-md-4 column">
<table class="table">
<thead>
<tr>
<th>
Details
</th>
<th>
His/ Her
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Last Online
</td>
<td>
1 hour ago
</td>
</tr>
<tr>
<td>
Ethinicity
</td>
<td>
White
</td>
</tr>
<tr>
<td>
Height
</td>
<td>
5' 8"
</td>
</tr>
<tr>
<td>
Body type
</td>
<td>
Slim
</td>
</tr>
<tr>
<td>
Diet
</td>
<td>
Veg
</td>
</tr>
<tr>
<td>
Smoke
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Drink
</td>
<td>
Occasionally
</td>
</tr>
<tr>
<td>
Drugs
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Religion
</td>
<td>
Hindu
</td>
</tr>
<tr>
<td>
Sign
</td>
<td>
Vergo
</td>
</tr>
<tr>
<td>
Education
</td>
<td>
Masters
</td>
</tr>
<tr>
<td>
Job
</td>
<td>
Consultant
</td>
</tr>
<tr>
<td>
Income
</td>
<td>
5 figures
</td>
</tr>
<tr>
<td>
Language
</td>
<td>
<ol>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="panel-567649">
<div class="row clearfix">
<div class="col-md-8 column">
<img alt="140x140" src="http://lorempixel.com/140/140/" /><img
alt="140x140" src="http://lorempixel.com/140/140/" /><img alt="140x140"
src="http://lorempixel.com/140/140/" /><img alt="140x140"
src="http://lorempixel.com/140/140/" />
</div>
<div class="col-md-4 column">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing
elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac
habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit.
Nam
purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere
diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin
consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id
bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum
nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu,
pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat
eu.</small>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The provided HTML uses Bootstrap styling. Bootstrap is a commonly used library for user interfaces.
To use Bootstrap, you would include a link tag referencing the bootstrap CSS file in the head as well as a script tag referencing the bootstrap javascript file at the bottom of the body like so:
<!DOCTYPE html>
<html>
<head>
<title>Your web page's title</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row clearfix well">
<div class="col-md-2 column">
<img class="img-thumbnail" alt="140x140"
src="http://lorempixel.com/140/140/" />
</div>
<div class="col-md-8 column">
<blockquote>
<p>
Potter Guy
</p> <small>21 / M / Single / Straight <cite>London
England</cite></small>
</blockquote>
</div>
<div class="col-md-2 column">
<button class="btn btn-default btn-block" type="button">
Poke
</button>
<button class="btn btn-default btn-block" type="button">
Message
</button>
<button class="btn btn-default btn-block" type="button">
Save
</button>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="tabbable" id="tabs-444468">
<ul class="nav nav-tabs">
<li class="active">
About
</li>
<li>
Photos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="panel-200304">
<div class="row clearfix">
<div class="col-md-8 column">
<p>
<strong>About me</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling
themselves as an idealized superman and I just want girls to know who I am
and they can take or leave it.
</p>
<hr/>
<p>
<strong>What i am doing with my
life</strong><br/>
it's just awful to write this stuff and i
hate having to sell myself or make myself seem like some amazing superhuman.
i have some generic interests, im a bit shy, and i dont play games and just
want be there for a girl and make her feel like the most unique and special
person, so this is one of the most annoying experiences ever. i dont even
know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
I am really good at ?
it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
The first thing you will notice about me?
it's just awful to write this stuff and i hate having to sell myself or make myself seem like some amazing superhuman. i have some generic interests, im a bit shy, and i dont play games and just want be there for a girl and make her feel like the most unique and special person, so this is one of the most annoying experiences ever. i dont even know why i bother with this stuff when everyone is basically selling themselves as an idealized superman and I just want girls to know who I am and they can take or leave it.
I cant live without ?
My Mobile My Car My Dog
I am looking for ?
someone good with heart
Details His/ Her Last Online 1 hour ago Ethinicity White Height 5' 8" Body type Slim Diet Veg Smoke No Drink Occasionally Drugs No Religion Hindu Sign Vergo Education Masters Job Consultant Income 5 figures Language
English
Spanish
Hindi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui. Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Here's a quick pen
I have a table made with HTML and PHP (PHP for the content) and because of the length of some of the sentences in one of the sub-sections I need the width to go outside the screen(so scrolling goes in width as well as height).
The printed text in one of the columns is a full stack trace for an Android app and because of the short length of the column, the text gets 'squeezed' inside it.
How can I expand the table in width to go off the screen so a scrollbar at the bottom appears? I'm going to add another column too so I need to have space enough.
Additionally, because of the height of the text in one of the 6 columns the other content gets set to the middle of the column. How do I make all the text start at the top independently of the other columns?
Important code:
<table border="1" style="border:2px solid black;">
<thead>
<tr>
<td>time</td>
<td>android_version</td>
<td>device_id</td>
<td>app_version</td>
<td>stacktrace</td>
<td>package</td>
</tr>
</thead>
<tbody>
<?php
//etc database stuff
while($row = mysql_fetch_assoc($result)) {
?>
<tr>
<td><?php echo $row['time'];?></td>
<td ><?php echo $row['android_version'];?></td>
<td ><?php echo $row['device_id'];?></td>
<td ><?php echo $row['app_version'];?></td>
<td ><?php echo $row['stacktrace'];?></td><!-- This is the part that is very long. The other text is centered based on the length of this. -->
<td><?php echo $row['package'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
I tried searching for it, but I only found questions relating to tables going outside the default visible screen but they did not want it. I want the table to be its full size, even if the screen expands so there is a scrollbar in width
To make table width bigger you can apply some CSS for StackTrace column.
If you need to display it in one line - use white-space: nowrap;
If you need only some specific width for it - use min-width: #px or just width: #px;
To align all elements to top of cell use vertical-align: top.
td {
vertical-align: top;
}
td:nth-child(5) {
/*white-space: nowrap;*/
min-width: 500px;
}
<table border="1" style="border:2px solid black;">
<thead>
<tr>
<td>time</td>
<td>android_version</td>
<td>device_id</td>
<td>app_version</td>
<td>stacktrace</td>
<td>package</td>
</tr>
</thead>
<tbody>
<tr>
<td>1975-01-01
<br/>1975-01-01
<br/>1975-01-01</td>
<td>5.3</td>
<td>9/11</td>
<td>0.1.001</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec tortor vitae augue tempus egestas. Maecenas dictum dui vitae nisl tempus porta. Fusce ac nunc nec magna gravida sodales eget sed massa. Integer dapibus pulvinar tortor, ut ultrices
nulla convallis vitae. Aenean egestas nunc sem, et efficitur est viverra at. Curabitur ipsum ante, commodo ac facilisis vitae, lobortis vitae felis. Curabitur dapibus faucibus erat, vitae consectetur est. Proin rutrum purus vel massa faucibus
elementum. Vivamus venenatis a ante nec fringilla. Phasellus volutpat eu erat et placerat. Quisque diam felis, mollis vel auctor et, dapibus sed nisi. Maecenas vitae nisi leo. Proin aliquam malesuada nisl, sed imperdiet ligula porta non.</td>
<td>Nop!</td>
</tr>
</tbody>
</table>
Note
I see that you are using mysql_fetch_assoc -- Don't use deprecated functions! Use PDO or MySqli
To your question:
How do I make all the text start at the top independantly of the other columns?
You must set a vertical align (vertical-align in CSS, or valign in HTML):
<td valign="top">
OR
<td style="vertical-align: top">
How do I make a HTML table to be bigger than the default page size
You can give width more than 100%
td {vertical-align: top;}
<body>
<table border="1" style="border:2px solid black;width: 150%;">
<thead>
<tr>
<td>time</td>
<td>android_version</td>
<td>device_id</td>
<td>app_version</td>
<td>stacktrace</td>
<td>package</td>
</tr>
</thead>
<tbody>
<?php
//etc database stuff
while($row = mysql_fetch_assoc($result)) {
?>
<tr>
<td><?php echo $row['time'];?></td>
<td ><?php echo $row['android_version'];?></td>
<td ><?php echo $row['device_id'];?></td>
<td >some text</td>
<td >This is the part that is very long. The other text is centered based on the length of this.</td>
<td ><?php echo $row['package'];?></td>
</tr>
<?php
}
?>
</tbody>
</table>
I want to prevent the browser from doing the work to parse and pre-render or paint some "hidden" HTML until I'm ready to show it, so that I can quickly display a minimal set of content, having the browser only do the work the render the visible pieces.
I'm looking for maximum render/paint speed of initial page load.
My current HTML:
<div id="stuff">
<div class="item">
<div class="visible">
<h1>Item 1</h1>
<a class="details" href="javascript:void(0)">Show more</a>
</div>
<div class="invisible">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit mi, bibendum a imperdiet sed, imperdiet id leo. Mauris vulputate tellus id metus euismod, eget gravida libero ultricies.</p>
<img src="/img/1.jpg" alt="" />
</div>
</div>
<div class="item">
<div class="visible">
<h1>Item 2</h1>
<a class="details" href="javascript:void(0)">Show more</a>
</div>
<div class="invisible">
<p>Vestibulum tristique fermentum dui, et pretium elit. Ut purus lacus, mattis vitae leo vel, congue mollis mi. Aliquam erat volutpat. Vestibulum luctus, purus ut mattis ullamcorper, justo odio ultrices dolor, nec porta purus turpis sed orci. Aliquam orci sapien, dictum sed facilisis molestie, tempus in orci.</p>
<img src="/img/2.jpg" alt="" />
</div>
</div>
... and so on...
</div>
The actual "invisible" content is MUCH more significant than in this example, and there are 50 "items" per page.
My external CSS:
.invisible {
display: none;
}
Will display: none in an external stylesheet prevent the browser from pre-rendering the hidden content?
Is there a better way to do what I want? Should I put an inline style="display:none" on the div instead?
Thanks!
display: none will not prevent the browser from parsing/loading that markup and associated resources (EDIT by Steven Moseley: tested this and found that display:none will actually prevent the browser from painting the HTML, i.e. applying CSS to the elements inside the hidden div, and will only do the work to parse the HTML to construct the DOM, which will in fact give a performance advantage). It is simply not rendered as part of the page flow until its display value changes. Generally speaking display: none and visibility: hidden have little or no impact on page load time. The main venue for optimization / performance with display: none involves selectively choosing when to display it since that triggers a reflow/rerender of page content, and even that is usually a negligible difference in all but very complex applications.
If you want to wait to load the content until it's needed, don't include it at all (or include empty div placeholders) and then use AJAX to fetch the content from the server once it's needed after page load and add it to the page with JS. jQuery makes this very simple with its built in AJAX functions.
Can you avoid building the invisible HTML in the first place? Are you going to at some point set .invisible { display: block }?.
I've found display: none isn't as wonderful for performance as you'd expect. You're better off only adding the extra elements to the screen when your user needs them, with infinite scrolling or pagination.
Try and avoid putting HTML into the page if it's not going to be viewed, and just add what you need in 1 go to minimize DOM manipulation.
Is it likely a user will look at all 50 items per page?
I have created an email newsletter for a client and the contents display correctly in my browser when testing the page and in Hotmail when opening the email. However, Gmail is consistently displaying the page incorrectly. I have a two-column layout, and the left column is just fine. The right column, however, does not contain the contents - they are instead placed off to the right outside the cell (as shown by using Chrome's developer tools). This happens no matter what the contents are. I've tried viewing it in Gmail through Firefox and still get the error. I'm stumped.
I read these two pages trying to get some help, but neither one addresses why the contents of a cell would display outside of it. It's the column with the Lorem Ipsum that is not displaying correctly. Here's what it should look like: http://www.murraysampson.net/michele/newsletter.html
And displayed incorrectly:
http://cl.ly/2e3D0z3A432g3r1x1a31
Here's my table:
<table width="900" height="541" border="0" cellpadding="0" cellspacing="0" style="border:solid thin">
<tr>
<td colspan="2"><div align="center"><img src="http://www.murraysampson.net/michele/header.jpg" alt="Header" width="875" height="114" /></div></td>
</tr>
<tr>
<td height="24" colspan="2" style="padding:0px; border-top:solid thin; border-bottom:solid thin"><p style="float:left; pading-top:10px; padding-bottom:0px; margin-top:10px; marging-bottom:0px"><span style="font-family: arial; color: #FF6600; margin-left:15px">An occasional snapshot of our activities</span></p><p style="float:right; pading-top:0px; padding-bottom:0px; margin-top:10px; marging-bottom:0px;font-family: arial; color: #666666;"><span style="margin-right:15px">January 2012</span></p></td>
</tr>
<tr>
<td width="574" height="600"><img src="http://www.murraysampson.net/michele/content.jpg" width="560" height="500" style="padding-top:0px; margin-left:15px" /></td>
<td width="326"><span style="font-family: arial; color: #FF6600; margin-right:15px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus metus, facilisis in tincidunt in, sodales id turpis. Quisque bibendum risus eget odio ultricies accumsan. Vivamus vitae venenatis nulla. Fusce sed nisl eu libero bibendum tincidunt quis sed sapien. In sed est vel ante venenatis scelerisque at at nulla. In hac habitasse platea dictumst. Mauris at tortor lorem, vehicula vestibulum erat. Aliquam ut odio nunc, in volutpat risus.</span>
<img src="http://www.murraysampson.net/michele/signature.jpg" alt="Signature" width="170" height="62" align="bottom" /><img src="http://www.murraysampson.net/michele/portrait.jpg" alt="Portrait" width="114" height="154" align="top" /></td>
</tr>
</table>
I had this problem even after adding the "display:block" thing, and here's how I solved it:
If the contents of cells are too big for the column width, they cause them to enlarge. Most of my text was on the large side, so I thought maybe the non-breaking spaces I had added to empty table cells was the issue. I added a "font-size:9px" attribute to the table, so that the non-breaking spaces would be smaller. This fixed the problem.
This question has been asked before.
Here is the answer from that question from mahalie:
The specific answer to your question is that Gmail adds extra space to
table cells which only contain an image. To fix this add
style="display:block" to these images.
Campaign Monitor is a great resources, as is Mailchimp.com. Both
provide several guides, template examples etc.