I have my table for a simple login page. I'm not stuck on this because I know I could just break my table apart and get the styling another way, but it seems like colspan is broken in Firefox.
HTML
<table>
<tbody>
<tr>
<td>E-mail:</td>
<td colspan="2">
<input type="textbox" name="email">
</td>
</tr>
<tr>
<td>Password:</td>
<td colspan="2">
<input type="password" name="password">
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="Login">
</td>
</tr>
<tr>
<td colspan="2">Forgot your password?</td>
<td style="width: 70px;">Reset It
</td>
</tr>
<tr>
<td colspan="2">Don't Have an Account?</td>
<td>Make One
</td>
</tr>
</tbody>
</table>
CSS
table {
width: 250px;
}
td:last-child {
text-align: right;
}
Here is a jsFiddle for my table. Viewing this table in Chrome or IE you can see what I'm trying to do which is to get the input boxes for the email and password to overlap the words "Forgot your Password" and "Don't have an Account". So the colspan should make those overlap which it does in chrome and IE, but not in Firefox. How come it fails in Firefox?
In my opinion, Firefox is displaying it correctly. The text overflows in IE and Chrome. You need to actually have 3 columns for your colspans to work:
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
...
Related
I am having trouble getting a border on a table. Here is the html for the table it shows having a border in Dreamweaver but not on the live webpage. I also have other tables on the page and do not want them to have the borders just this one.
<table style="width: 100%;" border="1" bordercolor="#000000">
<tr>
<td colspan="2" align="center" valign="middle">Please comeplete form</td>
</tr>
<tr>
<td width="50%">Event Name:</td>
<td>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>Date (YYYY-MM-DD):</td>
<td>
<textarea name="date" id="date"></textarea></td>
</tr>
<tr>
<td>Link to page:</td>
<td>
<input type="text" name="link" id="link"></td>
</tr>
<tr>
<td>Status:</td>
<td>
<input type="text" name="status" id="status"></td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle"><input type="submit" name="submit" id="submit" value="Submit"></td>
</tr>
</table>
You can add CSS to bring it up to standard
Something like:
table.mytable{
border: 1px solid #000000;
}
and then add a class="mytable" attribute to your table
You can initially style it like:
table,td,th {
border-collapse:collapse;
border: 1px solid #000000;
}
And in this way further you can add this as a class.
Good Morning,
Little bit of help f possible. I have customised my SharePoint masterpage with a footer. This footer has a table in it which is split up into columns.
Within one of the columns I have added 3 custom search boxes, a sharepoint 2010 hit counter webpart and some text and a logo.
However when I publish this page not all of these elements are displayed. I know the page loads them as I can see them when I view the source code for the page so I am guessing they are hiding under the first element.
Enclosed is the code I am using within this table. If anyone is able to offer some advice I would be graetful.
<table width="350" border="0" cellspacing="0" cellpadding="1">
<div>
<tr>
<td style="height: 22px">
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</tr>
<tr>
<td>
</td>
</tr>
<td>
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</tr>
<tr>
<td>
</td>
</tr>
<td>
<form action="http://bbmmtoday.bbmmjv.com/_layouts/searchresults.aspx">
<input type=text name=k placeholder="enter search..." size="32" id=k class="search"><input type="submit" value="search" class="button" >
</form></td>
</div>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<span lang="en-gb">
<AEPageHitsWebpart:AEPageHits runat="server" Description="Displays the page hit count of the current page" Options="" Title="AE Page Hits Web Part" ImportErrorMessage="Cannot import the AE Page Hits Web Part." IsActive="True" SinceDate="10/11/2014 10:00:00" ChromeType="TitleAndBorder" Template="<div style="height: 20px; width:200px;background-color:#fead30; Segoe UI;font-family: arial; font-size: 14px; color:#2e3e3f;padding:6px"><strong>{hits}</font></strong> Page hits since {since}<br>" ID="g_a2b9d6ba_62b2_41b5_8536_21e1972eab00" WebPart="true" __WebPartId="{a2b9d6ba-62b2-41b5-8536-21e1972eab00}" __MarkupType="vsattributemarkup" __designer:IsClosed="false"></AEPageHitsWebpart:AEPageHits></span>
</td>
</tr>
<tr>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<span lang="en-gb"> Created by <strong>
<a href="mailto:%20ray.spiteri#bbmmjv.com" class="style4">Ray
Spiteri</a></strong> and <strong>
Tim Quadling</strong></span></td>
</tr>
<tr>
<td valign="top">
</td>
</tr>
<tr>
<td valign="top">
<img alt="" valign="bottom" align="left" src="http://bbmmtoday.bbmmjv.com/SiteAssets/bbmm%20logo.png" width="286" height="26" /></td>
</tr>
<tr>
<td>
<AEPageHitsWebpart:AEPageHits runat="server" Description="Displays the page hit count of the current page" Options="" Title="AE Page Hits Web Part" ImportErrorMessage="Cannot import the AE Page Hits Web Part." IsActive="False" SinceDate="10/11/2014 09:00:00" ChromeType="None" Template="Page Hits: {hits}" ID="g_5e6becd0_a22c_4549_8b43_f9a7c860a639" WebPart="true" __WebPartId="{5e6becd0-a22c-4549-8b43-f9a7c860a639}" __MarkupType="vsattributemarkup" __designer:IsClosed="false"></AEPageHitsWebpart:AEPageHits></td>
</tr>
</table></td>
</tr>
</table>
There are three suspicious things in your HTML:
element after the element with ending between
and Unpair and
Two elements in the end while only 1 opening
All these HTML errors mean that it's on browser how it is rendered. And mostly it's rendered "wrong". Because it's incorrect.
I have a very simple table and I would like to understand what is incorrect with using this . I have entered a styling of color: red; just to visualize where the will work correctly.
<table>
<tr>
<td colspan=2>
<div id="transportation_table" >
<tr>
<td align="right"> Flights (round trip) </td>
<td align="right"> <input type="text" size="10" id="flights" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Oversized baggage fee (skis) </td>
<td align="right"> <input type="text" size="10" id="oversized" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
<tr>
<td align="right"> Taxi to airport, shuttle to resort (X2) </td>
<td align="right"> <input type="text" size="10" id="shuttle" onblur="calculateTransportation(flights, oversized, shuttle)">
</td>
</tr>
</div>
</td>
</tr>
</table>
You are not declaring a table inside of your div. Tr elements belong inside of tables.
See: http://dev.w3.org/html5/markup/tr.html
That is likely the big error you are seeing.
I am making a form for inserting recipes to my database, whenever im dealing with forms, i always go for simplicity -> tables.
For example i have this code:
<table>
<tr>
<td>
<tr>Text:</tr>
<tr>
<input type="button" />
</tr>
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
I wanted to have 2 rows inside a column, The above code doesnt actually work, im just demonstrating on how i would like it to arrange.
Is there anyway to do this? or do i have to resort to using divs and CSS(ugghh,, i hate this part. trial and error on the location.....)
<table>
<tr>
<td>
<table>
<tr>
<td>Text:</td>
</tr>
<tr>
<td><input type="button" /></td>
</tr>
</table>
</td>
<td>
<input type="text" />
</td>
</tr>
i have a table that consists of two rows, the second row is a table, which i want it's elements to be centered to the main table, so my code is as follows:
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id=gform:scan_area>
<OBJECT></OBJECT>
</DIV>
</TD>
</TR>
<TR>
<TD>
<TABLE style="PADDING-LEFT: 300px"> // works in firefox but doesn't work in ie9
<TBODY>
<TR>
<TD>
<INPUT>
</TD>
<TD>
<SPAN></SPAN>
</TD>
<TD>
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
ISSUE: TABLE style="PADDING-LEFT: 300px" works fine in firefox but doesn't work in IE9 (Quirks mode), please advise how to fix this issue or if you have any other ideas.
I think your code is not written well enough, it was much better if you used "colspan" for solving this issue.
Any way, I tried to change your code in a way that centralize the second table in the first table:
<TABLE>
<TBODY>
<TR>
<TD>
<DIV id='gform:scan_area'>
<OBJECT></OBJECT>
</DIV>
</TD>
</TR>
<TR>
<TD>
<TABLE style="width:60%">
<TBODY>
<TR>
<TD style="width:20%;padding-right:160px;">
<INPUT>
</TD>
<TD style="width:20%">
<SPAN></SPAN>
</TD>
<TD style="width:20%">
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
You need to do it this way
<div style="padding-left: 300px;">
<table>
...
</table>
</div>
For more read this answer: Padding table with CSS doesn't work on IE
Table padding is only applied to cells. By adding it to the <td> you will see it work in IE9 and Firefox. See: W3schools: Tables
<TABLE> // works in firefox but doesn't work in ie9
<TBODY>
<TR>
<TD style="PADDING-LEFT: 300px">
<INPUT>
</TD>
<TD >
<SPAN></SPAN>
</TD>
<TD>
<INPUT>
</TD>
</TR>
</TBODY>
</TABLE>