Writing HTML with Foundation is so repetitive - html

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.

Related

outlook 2013 in-browser inbox is adding style attribute to my table and destroying the alignment

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>

HTML pyramid-like tables

Yesterday a friend has shown me a weird problem he has encountered in his classes. He could not make a pyramid-like table(as shown in my jsfiddle link below).
I've never really dealt with html tables much, but I thought this was just about the program they were using being stupid. But when I tried writing html for it myself, I saw it was more than that...
This is what I was trying:
http://jsfiddle.net/5aDkL/
<table border="1">
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
<td colspan="2">C</td>
<td colspan="1">D</td>
<td colspan="1">E</td>
</tr>
<tr>
<td colspan="1">F</td>
<td colspan="2">G</td>
<td colspan="2">H</td>
<td colspan="1">I</td>
</tr>
<tr>
<td colspan="2">J</td>
<td colspan="2">K</td>
<td colspan="2">L</td>
</tr>
</table>
As you can see, the table doesn't look anything like you would expect(unless you know about this already).
So after some web searching, I came up with the following, which works fine(with a single line of css):
http://jsfiddle.net/SzWHX/
<table border="1">
<col>
<col>
<col>
<col>
<col>
<col>
<tr>
<td colspan="1">A</td>
<td colspan="1">B</td>
<td colspan="2">C</td>
<td colspan="1">D</td>
<td colspan="1">E</td>
</tr>
<tr>
<td colspan="1">F</td>
<td colspan="2">G</td>
<td colspan="2">H</td>
<td colspan="1">I</td>
</tr>
<tr>
<td colspan="2">J</td>
<td colspan="2">K</td>
<td colspan="2">L</td>
</tr>
</table>
But I was wondering, is there a better way to code this?
I mean, those empty col elements just look silly there, right?
So if anyone can enlighten me, that would be much appreciated.
That "pyramid" looks really ugly:
Especially obvious when you look at the table without borders:
Wouldn't a better compromise be to add the necessary empty ( ) cells so that the spacing is correct? I set all the columns to a width of 20px, you can do this with css without use of col in the below example if desired.
One last comparison:
There is no simpler way at present. This is a good example of a case where the col element is really needed (for the intended styling). The reason is that otherwise there is no way to refer to the 3rd and 4th column in CSS, since no table cell occupies only one slot in such a column.
In theory, the :nth-column() pseudo-class would let us do the styling without the col elements, but it’s really work in progress, being planned (CSS Selectors Level 4).

How to extract only the 1st table tag from a html page having various nested table tag

I have the following html page. I want to extract data only within the 1st table tag in C#. the html page code is:
<table cellpadding=2 cellspacing=0 border=0 width=100%>
<tbody>
<tr>
<td align=right><b>11/09/2013 at 09:48</b></td>
</tr>
</tbody>
</table>
<center>
<table border="1" bordercolor="silver" cellpadding="2" cellspacing="0" width="100%">
<thead>
<tr>
<th width=100>ETA</th>
<th width=100>Ship Name</th>
<th width=80>From port</th>
<th width=80>To berth</th>
<th width=130>Agent</th>
</tr>
</thead>
<tbody>
<tr><td>11/09/2013 at 09:00 </td>
<td>SONANGOL KALANDULA </td>
<td>Cabinda </td>
<td>Valero 6 </td>
<td>Graypen </td>
</tr>
</tbody>
</table>
To be more specific I want to extract only the row having date 11/09/2013 at 09:48 the below mentioned code is under the first of tag I am using regex
"<table[^>]*>([^<]*(?:(?!</table)<[^<]*)*)[</table>]*"
but with this I am getting whole of the page source that is I am getting the data between all the table tags but I want only text between first table tag.
Can anyone tell me regular expression with which I can only extract this particular portion from the whole html page?
When trying out your version here, it seems to work to me on the input you specified, though [</table>]* should really be just </table> ([</table>]* means any number of characters in the set: <,/,t,a,b,l,e,>)
This seems like it would bear simplification, though. This should also work:
<table[^>]*>.*?</table>
All bets are off if you have nested tables, of course.

Table representation using css

Consider the scenario like this.
I have Array List of string arrays.
I want to represent them in the image shown below.
currently I have implemented this as Table. But this is not dynamic. Going forward I have to loop twice which seems some what difficult.
<table>
<tr>
<td>Pack1</td>
<td>Ch1</td>
</tr>
<tr>
<td></td>
<td>ch2</td>
</tr>
<tr>
<td>Pack2</td>
<td>val1</td>
</tr>
<tr>
<td></td>
<td>val2</td>
</tr>
</table>
Please let me know any other approach using css styles.
Loop through every pack
Again loop through each pack to get the values.
This will likely be a little bit of a hot-potato as it's not entirely clear what you want exactly though I've posted a bit of a more structured table format that seems to resemble your goal. If you know how to use colspan and rowspan then you can adjust the table (e.g. if you want multiple rows on a single column) though consider how tables are intended and mostly style by default. I've added some CSS and text to help give you an idea of how (X)HTML tables work when you take advantage of things.
As far as looping I think you can apply the idea of "packages" to tbody elements that are like partitions of a table...they're part of the same kind of data though have their own separate groups.
Comment if you need help adjusting this, it's not difficult.
<table summary="Describe your table here." style="border: 1px solid #aaa; border-collapse: collapse; width: 40%;">
<thead style="background-color: #f77;">
<tr><td colspan="3">Table Header</td></tr>
</thead>
<tfoot style="background-color: #f77;">
<tr><td colspan="3">Table Footer</td></tr>
</tfoot>
<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 1 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>
<tbody>
<tr style="background-color: #fcc;"><th colspan="3">Pack 2 (Tbody Header)</th></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr><td>One</td><td>Two</td><td>Three</td></tr>
</tbody>
</table>

How do make a profile table?

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>