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>
Related
Ok, now, I invented tf for table
<table>
<tr>
<td><b>User Name</b></td>
<td><input type="text" name="userName" /></td>
</tr>
<tr>
<td><b>Password</b></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<tf colspan="2" align="center"><input type="submit" value="Login" /></tf>
</tr>
</table>
It somehow works but the tf row jump on top.
How to fix?
You can't just invent new tags and expect the browser to know what to do.
Besides from that, I believe you are looking for a proper utilization of the tfoot tag, like it is described here: http://www.w3schools.com/tags/tag_tfoot.asp
So what you want to do is:
<table>
<tbody>
<tr>
<td><b>User Name</b></td>
<td><input type="text" name="userName" /></td>
</tr>
<tr>
<td><b>Password</b></td>
<td><input type="password" name="password" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="center"><input type="submit" value="Login" /></td>
</tr>
</tfoot>
</table>
This simply happens because the <table> tag does not recognize <tf>. <td> and <tr> are tags that link to the table tag which is why they appear correctly. The only way to use unrelated tags are within the <td> tags.
The unrelated tag <tf> gets thrown out of the table because of this and this is why it is shown above the table
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 to insert a check box and one more field into an existing <td>. However, these fields are currently not showing on one line. Please find the html below:
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
</body>
</html>
This outputs something like this:
Jill Smith
Timer Please check the box
[]
Here "Timer" and check box aren't on the same line (inside the same <td>).
Can anybody please help me out?
PS: I can't change the already available table format.
Reason for timer inside p:
Timer is a dynamic filed which have the count start from 20 to 0.
So I have to use <p> element id inside JavaScript which I didn't mention here.
td p,td input{float:left}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
td p,td input{display:inline}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
td p,td input{display:inline-block}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<p/>
<input type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p>Timer<input type="checkbox" id="checkBox" name="checkBox" size="30"/><p/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
Update (comment request)
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p style="float:left">Timer<p/>
<input style="float:left" type="checkbox" id="checkBox" name="checkBox" size="30"/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
adding a class
.inline{
display:inline
}
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>
<p class=inline>Timer<input class=inline type="checkbox" id="checkBox" name="checkBox" size="30"/><p/>
</td>
<td>
Please check the box
<td>
</tr>
</table>
Wrap each item in different cell, it'll help you in that case.
<tr>
<td>
Timer
</td>
<td>
<input type="checkbox" id="checkBox" name="checkBox"/>
</td>
<td>
Please check the box
</td>
</tr>
Or, if you need checkbox and label in the same cell
<tr>
<td>
Timer
<input type="checkbox" id="checkBox" name="checkBox"/>
</td>
<td>
Please check the box
</td>
</tr>
Or even
<tr>
<td colspan="2"> <!-- colspan is 2 because you have two cols in your table -->
Timer
<input type="checkbox" id="checkBox" name="checkBox"/>
Please check the box
</td>
</tr>
"P" is block element and creates new block and new line as result.
<p> does force a new line, so the Checkbox is in the next line. Try <span>Timer</span>
<label><input type="checkbox" name="checkbox" value="value">Text</label>
Would be the best option, since now you can also click on the Name of the Checkbox, to check the box.
Remove the "paragraph"
< p>
element , near the text "Timer" from the above code. :)
P is a block level element. What that DTD is saying is that <p> tags can only contain inline elements.
you can overide this with
p{
display:inline-block!important;
}
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 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>
...