OK, another quick question pertaining to this. I took the advice and it works great, my dilemma now is that there is a space between the tables.
I was going to attach a file but I guess I don't have the rep too quite yet.
Anyways, if you can go to http://www.wholesalecabinets.us/Wall-Cabinets_c_524.html, you'll see what I mean. See how the line is close at the tops of the tables and there is a space before the line starts again?
I know, I know... something easy for you guys.
Sorry, I'm a newb and I don't have much HTML experience, but I need some help with a problem.
Currently I have a website that has a bunch of product. I managed to get the products listing to be pretty close to what I want with the exception of one problem, I want the price to be on the same line as the [name] but to the far right. Currently it is under the description to the far right.
Any help is greatly appreciated.
Thanks,
Kevin
<table border="0" cellspacing="0" cellpadding="2" width="95%">
<tr>
<td rowspan="2" align="left" valign="top" class="item" style="width:75px;"><img src="thumbnail.asp?file=[THUMBNAIL]&maxx=50&maxy=50" alt="[name]" border="0" /></td>
<td class="item" align="left" valign="middle"><span class="item">[name]</span><br>
<span class="item">[description]</span></td>
</tr>
<tr>
<td class="item" align="right" valign="top"><span class="price">[ITEMPRICE]</span> [product_quantity]
<input type="hidden" name="item_id" value="[catalogid]" />
<input type="text" size="2" name="qty-[counter]" value="0" /></td>
</tr>
<img src="assets/templates/[template]/images/div.png" alt="template" vspace="2" width="95%" height="1" />
</table>
Delete these two lines
</tr>
<tr>
You're inserting a new row, when all you want is a new column on the same raw.
You should be able to achieve this by putting the price td in the same row as the name td.
The <tr> elements in your HTML are table rows. What you're looking for are columns. You cannot explicity define columns in HTML (HTML is one dimensional after all) but you can define td (table data) and th (table header) elements inside a row to effectively create a column. If you want your item name, description and price to all be on the same line, they need to be inside the same table row, represented separately as either <td> or <th> elements.
Related
using Objective-C HTMLReader for my first (simple, I think) HTML scraping task. But there's little documentation with it, and after a lot of experimentation, can't quite get what I need.
I'm scraping an old HTML page whose largest feature is one table with three columns and many rows. Here's a sample of the table with one row:
<table border="1" cellspacing="2" cellpadding="6" bordercolor="#000000" bgcolor="#999999" style="margin-top:50px;width:100%;">
<tr height=30>
<td bgcolor="#34003C" align="left" valign="middle" background="background.gif"><span class="cls_TableHeader">Bands</span></td>
<td bgcolor="#34003C" align="left" valign="middle" background="background.gif"><span class="cls_TableHeader">Style</span></td>
<td bgcolor="#34003C" align="left" valign="middle" background="background.gif"><span class="cls_TableHeader">Country</span></td>
</tr>
<tr>
<td class="cls_tdDisco0" align="left" valign="middle">
<strong>THE BEATLES</strong>
</td>
<td class="cls_tdDisco0" align="left" valign="middle">
<span class="cls_DiscoText">Rock</span></td>
<td class="cls_tdDisco0" align="left" valign="middle"><span class="cls_DiscoText">England</span></td>
</tr>
there are, of course, many rows.
What I'm trying to accomplish:
I need to search for the td that contains "THE BEATLES", and extract the href attached to it (of course, even when it's contained in the middle of a lot of other rows)
What I've tried:
I can get the table itself with
HTMLDocument *home = [HTMLDocument documentWithData:data contentTypeHeader:nil];
HTMLElement *table = [home firstNodeMatchingSelector:#"TABLE"];
HTMLNode *theActualTable =[table childAtIndex:1];
but I can't really use the method "nodesMatchingSelector" to search rows since what I'm looking for isn't a selector. I've tried getting the rows (via children), but then I'm looking at iterating through each row's children of children until I drill to the tag that contains THE BEATLES and then using that index to get the a tag attached to that? It seems that there should be a much easier way to do this with HTMLReader. I feel like I'm missing something simple.
Thanks in advance!
Here is some psuedo code that might work for you:
Use nodesMatchingSelector to get all the tr in the table
Then loop through all the tr and get the first td of each tr
Then use nodesMatchingSelector again to get the strong tag
Then use node.textContent to get the text content of the strong tag
https://github.com/nolanw/HTMLReader has an example in the readme that shows using the textContent method
feel free to post follow up questions as comments if any of this doesn't make sense
I have the following HTML table set up which yields the result in the screenshot.
Code:
<table>
<tr>
<td align="center" colspan="4">
<img src="website_title_banner.png" style='width:100%;' alt="nul"/>
</td>
</tr>
<tr style="width:100%;">
<td>
<img src="About sign.fw.png" style='width:100%;'/>
</td>
<td>
<img src="gallery sign.fw.png" style='width:100%' />
</td>
<td>
<img src="Products sign.fw.png" style='width:100%' />
</td>
<td>
<img src="Contacts sign.fw.png" style='width:100%'/>
</td>
</tr>
</table>
Scrrenshot
I'd like to have it so the signs are 'nailed' to the striped banner. Given that the signs are all placed in their own table cell in the row, is it possible to make the 2nd row overlap with the first row by a specified pixel distance?
I'm reasonably proficient with HTML (but it has been a long time) but I am unfamiliar with CSS - so if the solution is to use CSS, a step by step implementation would be greatly appreciated (using Dreamweaver).
Thanks in advance!
Try styling your second row with a negative margin-top. This should make the .png's overlap the row above them. Here's an example based off of your code - http://jsfiddle.net/NinoLopezWeb/myv37cb0/1/
This is not the best way to do it, but if you really want to you can use a negative value in
margin-top, for example margin-top: 10px;
Not the cleanest way but it works.
quickest way to do this is have a negative margin. You can also make the stripes as the background of the menu.
I had a table
<td colspan="6">
<table width="100%" border="0">
<tr align="center">
<td width="5%"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></td>
<td width="7%"><strong>Item Id </strong></td>
<td width="20%"><strong>Item</strong></td>
<td width="17%"><strong>Type</strong></td>
<td width="17%"><strong>Rate</strong></td>
<td width="17%"><strong>Quantity</strong></td>
<td width="17%"><strong>Price</strong></td>
</tr>
I am representing the table through <DIV> like This
<div id="table">
<div class="row" id="row" align="center">
<div id="cell"><input type="checkbox" name="chkAll" class="chkAll" value="1" /></div>
<div id="cell"><strong>Item Id </strong></div>
<div id="cell"><strong>Item</strong></div>
<div id="cell"><strong>Type</strong></div>
<div id="cell"><strong>Rate</strong></div>
<div id="cell"><strong>Quantity</strong></div>
<div id="cell"><strong>Price</strong></div>
</div>
but I can't find any replacement for colspan="6". Can anyone help?
OK, let's get this straight for the 100th time.
Tables are not evil.
Tables are for tabular data. If you have headers, rows or columns, then it's cool. Tables are the thing to use.
In HTML. Tables.
Misusing elements is evil
Using any element for the wrong reason is wrong.
h1 for images
table for layout
button for links
These things are wrong. And bad.
Summary
Use tables for tables, not for layout, and everyone will be happy.
Div do not use concept of columns. You can have as many as you want, div's in a row. You can fix width of div and then can use them to build up table. By the way you can go for css framework like bootstrap will be much more efficient.
Make the div width in such a way that, it will occupy "TD" sections.
For that you just need to add one more class with some higher width in it and some less div on the new row.
I was wondering if I use colspan attribute in a HTML table that I intend to have as an email, will email clients (Outlook etc...) understand what colspan does, as I have read that this might cause an issue with the layout?
Colspan and rowspan are both fully supported in all major email clients. They are more difficult, but if you get it right they are a great option in combination with nested tables.
The reason they have a bad reputation, besides the difficulty is because there is a particular quirk in Outlook you need to take into consideration, otherwise your layout can break.
Colspan:
Outlook has an issue where if you put a colspan in the first row of a table, it will mess up the widths of the subsequent rows. The work around for this is that you need to specify your cell widths in the top row, even if it is an empty row.
Here is an example:
<!-- the second row in this example will not respect the specified widths in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
</td>
<td width="400">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
Rowspan:
Even more avoided than colspan is rowspan. I've found it can actually display more consistently than nesting tables depending on your target audience. This is because rows (particularly a spanned one) do not separate as much as tables when forwarding the email from Outlook due to the <p class="msoNormal"> tags Outlook wraps around them. These gaps are particularly unavoidable if someone forwards your email to Gmail.
One thing to note is that rowspan doesn't seem to work with Blackberry (which I wouldn't consider a major client). So like with anything in html email, you need to play the percentages game and decide where you least want it to break.
A basic example of colspan and rowspan working together:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr><!-- hidden row to establish widths in Outlook -->
<td width="200">
</td>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#333333">...
</td>
<td width="200" height="400" rowspan="2" bgcolor="#444444">...
</td>
</tr>
<tr>
<td width="200" height="400" rowspan="2" bgcolor="#555555">...
</td>
<td width="200" height="200" bgcolor="#666666">...
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#777777">...
</td>
</tr>
</table>
To accomplish something similar to this without rowspan/colspan, you would have to split the rectangular table cells into small squares. Imagine if the top right cell was an image overlapping the header see this question for a real world example. If you were to avoid rowspans and split the logo image horizontally within two stacked cells, this would become problematic when Outlook does it's msoNormal thing. Nobody likes a seam in their image.
In html email, you can always split images vertically without any risk of seams/gaps, but as a rule, you should always avoid splitting an image horizontally. Rowspan helps to avoid this in scenarios when you want overlapping images.
One last note - Outlook also has the same spanning issue with rowspan as it does with colspan. You need to establish your row heights in the first column for it to respect the heights of the subsequent spanned rows. Here is an example of that. Note the first cell in each row is empty.
Just thought id add a bit of input to your question
Colspan can be used but i would suggest against it. Whenever i create emails (6 months experience) i have always used nested tables. Also you can only use inline css in emails so i would be very careful using even margin and padding.
Couple of things i do on every email.
Always use this code in every image on your page. It will correct a gmail space below the image bug.
style="display:block"
Also use border="0" on any image links to stop a blue border appearing.
I hope this helps!
Another tip in addition to the style="display:block' is to add line-height:0 on the with an image in - this sorts out the odd whitespace bug in Outlook 2007.
I use colspans all the time but also nest tables where possible - avoid rowspans - they are are nightmare, and when you do nest tables don't go too mad and nest 4 / 5 or 6, I find that starts to muck things up.
Yep. All HTML markup is allowed in most if not all email clients. When it comes to scripting, then you've got an issue to contend with, for scripting is simply not allowed by most if not all email clients.
Rowspans and Colspans are okay but I would strongly suggest you use nested tables. You will have extra lines of code, however, this will save you from any breaks on other email clients.
When coding a HTML email newsletter Outlook 2010 is acting up. (surprise surprise)
The following screenshot is the result: http://screencast.com/t/PSZqP7wg
This screenshot shows what's happening (same, but images turned off): http://screencast.com/t/DrbexyHnytJ
Obviously, the middle white column is to narrow. Should be 604px wide, but is a lot less. It seems Outlook is placing extra padding next to the spacer images.
Anyone has an idea why this is happening?
This is the source in the body tag:
<table width="761" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
</tr>
<tr>
<td width="77" style="width: 77px;">
<img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
</td>
<td width="604" bgcolor="ffffff">
test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
klqshdf kqshdklf hqskldfqklsd
</td>
<td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
</tr>
<tr>
<td height="151" colspan="3">
<img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
</td>
</tr>
</table>
You just need to add a background color to both tags. the widths are displaying correctly.
I'm used to issues with "undefined" blank spaces and line breaks in IE and Outlook. They are usually interpreted as a real, wanted space, formatted by style of the nearest parent (if any).
That's why i prefer writing htm like this:
<tr>
<td height="151" colspan="3"><img
src="http://www.bothino.be/newsletter/bottom.jpg"
width="761" height="151" alt="" /></td>
</tr>
Line breaks inside a tag will make no difference at display time ... but apply a similar structure to the code.
The important part is no blank between TD and IMAGE tag.
Maybe, this doesn't explain and solve that huge indentions in your screenshot.
my experience with Outlook is to never ever never ever use the rowspan and colspan attributes. This is guaranteed to cause trouble. Should a table cell require a different layout/width than the one above/below it, nest another right into it with the correct layout. this way the overall basic grid stays intact. Not nice, but then again: outlook plays dirty and so will you (have to). All tables need to have cellpaddign=0 and cellspacing=0. This helps me to get over similar issues.
sometimes it's better to leave out width for td's eg leave out width=77 and rest of width for all td's. that way it can expand automatically to fill the entire row. or you can also include a table withing that tr.