I am trying to code this formula (standard deviation):
____________
δ =√∑(xi - µ)2
n
My html code is:
<table border="0" cellspacing="0" cellpadding="0" width="180">
<tr>
<th width="180" colspan="3"><p align="center"><strong>Population Standard Deviation</strong></p></th>
</tr>
<tr>
<td width="40" valign="top"><p align="center"> </p></td>
<td width="50" rowspan="4"><p align="right">√</p></td>
<td width="90" valign="bottom"><p align="left">__________</p></td>
</tr>
<tr>
<td width="60" rowspan="2"><p align="centre"><strong> δ =</strong></p></td>
<td width="90"><p align="center"><strong>∑(x<sub>i</sub> -µ)<sup>2</sup></strong></p></td>
</tr>
<tr>
<td width="90"><p align="center">n</p></td>
</tr>
The challenge I have is to get the formula to be well positioned. I was thinking the row height would help but from further reading the row and column span would nullify it. So how can I best present this formula?
I also have a challenge in adding the division line right below the summation (row3). I tried using CSS but it would mean having the subscripts and superscripts underlined. Is there a better code for this as well? Thanks.
Related
So I am building the final page of an online exhibit I am working on. The final page uses the exact same format as an earlier page in the exhibit (with an image to the left and a paragraph to the right of the image) so I just copy/pasted all the code and changed URLs, text, and dimensions of images and td elements as I needed to. I have changed nothing to do with the alignment of the various elements on the page, but now I have an element that is basically ignoring td valign="top" and appears to be aligned to center instead. I've done a line by line comparison of the html of the new page with the original but I can't find anything that should have changed it. Basically the text part of the page (title of page and body of page) should start on the same line as the top of the image, but instead it's starting in the center after a huge amount of white space.
Here's the particular table in question with the text and full URLs removed to make it a bit shorter:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="*image*" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
There is a " in front of valign, so it's not reading the attribute.
<td width="500" "valign="top"><div align="center">
The full code should be:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="http://placehold.it/400x267" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
Here's a working codepen: http://codepen.io/vic3685/full/vyKmwg/
I have created a html email using tables. It displays fine in browsers but when I view it in outlook.com, gmail and outlook client there are horizontal 'gaps', the table also seems to be wider (on the right) and longer (at the bottom).
I have been searching the internet for a long time for an answer with no success, and have tried many different things ( I am new to html). I have tried putting the table in another table container, I have deleted the gaps between the tds, I have added a paragraph container around the images (which fixed one of the gaps in gmail but created another in outlook client that wasn't there before). All my cells have defined widths and heights, as does my table. I have set the padding, borders etc to 0. I tried adding display:block to each image but it pushed the whole table out horizontally and made it ridiculously wide.
I am out of ideas! Please help as I need to sort this issue out, I have not even added the text yet. I have included my code here. Many thanks.
<!-- Save for Web Slices (AP-MelbourneCup14-4.psd) -->
<table id="table_01" width="100%" height="100%"><table id="Table_02" width="510" height="818" border="0" style="border-spacing:0" cellpadding="0" cellspacing="0" bgcolor="#F0f0f0" align="center">
<tr>
<td colspan="6" width="510" height="19"></td>
</tr>
<tr>
<td width="510" height="75" colspan="6"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_02" src="images/AP-MelbourneCup14-4_02.png" width="510" height="75" alt="" border="0"/></td>
</tr>
<tr>
<td colspan="6" width="510" height="76"></td>
</tr>
<tr>
<td rowspan="9" width="22" height="521"></td>
<td rowspan="3" width="355" height="225" bgcolor="#f0f0f0"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_05" src="images/AP-MelbourneCup14-4_05.png" width="355" height="225" alt="" border="0"/></td>
<td colspan="4" width="133" height="107"></td>
</tr>
<tr>
<td colspan="3" width="108" height="87" bgcolor="#000000"></td>
<td rowspan="8" width="25" height="414"></td>
</tr>
<tr>
<td colspan="3" rowspan="2" width="108" height="56"></td>
</tr>
<tr>
<td width="355" height="25"></td>
</tr>
<tr>
<td colspan="2" width="398" height="33" bgcolor="#303473"></td>
<td colspan="2" width="65" height="33"></td>
</tr>
<tr>
<td rowspan="4" width="355" height="238"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_13" src="images/AP-MelbourneCup14-4_13.png" width="355" height="238" alt="" border="0"/></td>
<td colspan="2" width="57" height="57"><p style="margin:0; font-size:0px; line-height:0"><img id="AP_MelbourneCup14_4_14" src="images/AP-MelbourneCup14-4_14.png" width="57" height="57" alt="" border="0"/></td>
<td rowspan="2" width="51" height"112"></td>
</tr>
<tr>
<td colspan="2" width="57" height="55"></td>
</tr>
<tr>
<td colspan="3" width="108" height="87" bgcolor="#000000"></td>
</tr>
<tr>
<td colspan="3" width="108" height="39"></td>
</tr>
<tr>
<td colspan="6" width="510" height="105"><p style="margin:0; font-size:0px; line-height:0"><img src="images/AP-MelbourneCup14-4_19.png" alt="" width="510" height="105" align="bottom" id="AP_MelbourneCup14_4_19" border="0"/></p></td>
</tr>
<tr>
<td colspan="6" width="510" height="22" bgcolor="#0697d4"></td>
</tr>
</table> </table>
<!-- End Save for Web Slices -->
There is so much wrong with the code. It's overly complex for starters. The images should have style="display:block" if you don't need to have anything inline with them so as to avoid some email clients adding unwanted extra padding around the images. You specify columns and rowspans on lines 24-26 but they don't add up. You have paragraph tags without the closing tag... Since you are new to HTML, you may want to try the new Litmus tool for creating emails: https://litmus.com/email-builder
For this code, when I add the text in the third table row it ruins the layout of all adjacent cells. Please help.
<table width="720" bgcolor="white" height="650" align="center" cellpadding="10" border="1">
<tr valign="top">
<td colspan="8" height="70" align="center"><img src="yooo.gif" align="middle" /> </td> </tr>
<tr height="40">
<td colspan="2" align="center" width="175">Home</td>
<td colspan="2" align="center" width="175">Food</td>
<td colspan="2" align="center" width="175">Hobbies</td>
<td colspan="2" align="center" width="175">Martin's Blog</td> </tr>
<tr height="260">
<td class="info" colspan="4" valign="top"><h2>Welcome to Nenad's Blog!!!</h2><h6>Here on this blog we will be talking about
a bunch of random stuff that are so completely unrelated that will blow your mind.<h6></td>
<td class="info" colspan="4"> h </td> </tr>
<tr height="260">
<td class="info" colspan="4"> h </td>
<td class="info" colspan="4"> h </td> </tr>
Your table looks good from what I can make of what you posted.
You should, however, not be using tables for layout purposes. They are supposed to be used only for tabular data, you know..like a spreadsheet.
For styling your site, you should be using CSS.
http://jsfiddle.net/3rJv7/
Code Runs
You might have to define what "ruin" means. However my best guess is that all the colspans cause some browsers to calculate the optimum column widths poorly. I found that many browsers handle it better if your first row defines the widths, even if it's a dummy row with spacer images. I know, terrible semantically, but using tables for layouts tend to go that way.
I have a website, http://pigymunk.co.uk, and as you can see, the table has some fault where there's a a large gap between 2 cells. Can anyone help find that fault?
<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
<td><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style="align:"middle"/></td>
</tr>
<tr>
<td><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/> </td>
<td><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></td>
You can change the colspan attribute of your first cell to span the other columns. Note the cell that has <td colspan="4">. Try this:
<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
<td colspan="4"><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style=" align:"middle"/></td>
</tr>
<tr>
<td><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/Faceb%20icon.png" alt="Facebook" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/distractions.png" alt="Demos" align:"middle"/></td>
</tr>
</table>
jsFiddle example.
And just as a side note, you may want to look into updating your code and getting rid of deprecated attributes like align="center" and inline CSS among other things.
Quick fix: change the first <td> to <td colspan="4">.
Your table has one cell in the first row, four cells in the second row. This violates the HTML table model principles, so all bets are off. What happens in practice is what you see here: the first cell (the large image) is treated as belonging to the first column only.
This can be seen e.g. in Firefox Web Developer Extension, which has a function for drawing borders around all cells.
<table width="100%" border="0">
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="120">Banner Image</td>
</tr>
<tr>
<td width="400" colspan="80"></td>
<td width="10" colspan="2" bgcolor="yellow"></td>
<td width="190" colspan="38"></td>
</tr>
</table>
</table>
The alignment is messed up for the 2nd row. How can it be resolved?
Looks like there are a lot of issues here.
First off, this isn't valid html. The second table tag can't go where you have it. You need to do something like:
<table width="100%" border="0">
<tr><td>
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</table>
</td></tr>
</table>
Which will probably solve your immediate problem. However, why on earth do you have 120 columns? That seems wrong by any standard.
Note I removed the colspan because it's use here seemed very inappropriate.
Also, you might ask yourself why you have the outer table tag anyway. It's not exactly doing anything for you that can't be done in a better manner.
Colspan is used to indicate how many COLumns a single column SPANs, not to indicate a pixel width, as it would appear that you are trying to do here.
Instead, use colspan to indicate how many columns a single column should span, and indicate the width of columns either using css styles or the "width" atttribute.
See this example:
http://jsfiddle.net/xixionia/yt3gf/
The second table should be better if you placed it inside a td on the first table. Then on the second table there's a lot of colspan.
<div>
<table>
<tbody>
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</tbody>
</table>
</div>
I do prefer to use div in place of table. But you still have a choice. As you can refer to the other post.
You would try:
<table width="100%" >
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="120">Banner Image</td>
</tr>
<tr>
<td style="width:400px;" colspan="80">a</td>
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>
<td style="width:190px;" colspan="38">c</td> </tr>
</table>
</table>
I add "border=1" and text in the cells in order to see the changes.
You got a table inside a table directly and thats not "valid".
Considering:
I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190
You should have:
<table style="width:100%; background-color: #fff;">
<tr>
<td colspan="3">Banner Image</td>
</tr>
<tr>
<td style="width: 66.6%"></td>
<td style="width: 1.6%; background-color: yellow;"></td>
<td style="width: 31.6%"></td>
</tr>
</table>
You are clearly trying to use tables to make layout wireframes. You should research more about CSS and html5.
This answer will probably fix your code but not the logic you are trying to apply.