I'm working on a form in my application and trying to clean up the code that was put in place before me. HEre's something I'm coming across that seems like bad practice and I am having a hard time trying to abbreviate it and clean it up.
Here's the code...
<tr>
<td style="padding-top: 10px; padding-bottom: 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="6%"></td> <---- I want to get rid of this!
<td width="45%">
<asp:CheckBox ID="chkBHRAExpiresDischarge" runat="server" onclick="RadioControl(this);" Text="Upon my discharge from treatment" />
</td>
<td>
<asp:CheckBox ID="chkBHRAExpiresReceiptOfInfo" runat="server" onclick="RadioControl(this);" Text="Upon receipt of the requested information" />
</td>
</tr>
<tr>
<td></td> <------- Have to keep adding this for every checkBox
<asp:Checkbox ID=.............."
</tr>
So what I'm trying to get rid of the the initial indentation, mainly ....
<td width="6%"></td>
Because this is in place, i have to do a
<td></td>
before every single row otherwise the indentation dissapears. Is there any way to fix this so that all my checkboxes are indented?
You can use colspan="2" on the checkbox cells and put padding-left: 6% as a style. Here's a JS fiddle. I added a row above your first row to show the column spacing, modified the first row use this change, and left the second row intact.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
edit: Also, I recommend validating your HTML. You can wrap your code snippet up with a doctype and the other necessary items to get identify errors and warnings at https://validator.w3.org.
<!DOCTYPE html><html><head><title>Title is Required!</title></head><body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td>One</td><td>Two</td><td>Three</td></tr>
<tr>
<td width="45%" colspan="2" style="padding-left: 6%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
<tr>
<td width="6%"></td> <!---- I want to get rid of this! -->
<td width="45%">
<input type="checkbox" /><label>Checkbox</label>
</td>
<td>
<input type="checkbox" /><label>Checkbox</label>
</td>
</tr>
</table>
</body><html>
Not sure if you'll find this acceptable, but you could keep the <td width="6%"></td> and give it a huge rowspan value. So like this:
<td width="6%" rowspan="999999"></td>
Then you can omit the empty <td></td> for the first 999999 rows. Most likely you have fewer rows than that; or if not, just make the rowspan even higher. The table will not become longer just because of the huge rowspan value.
Of course this all breaks down if you also have rows where the indent should not be applied; a fix for that could be to calculate the exact rowspan value in advance.
Related
I have a CSS coding challenge for everyone here...
I have searched google and looked at multiple options, but cannot figure this one out.
Is also worth mentioning that I'm not a developer, but I understand the basics of how to implement CSS.
I have a section of code that contains check boxes,
I need to make only specific checkbox items bold (not all of the items) via CSS...
Under normal circumstances, the CSS code for this would be: font-weight: bold;
in the right class or ID, however, in my case, I'm using a third party platform with predefined, css classes for each of the code sessions, in the case of the checkboxes section, the CSS class for this is called: .formFieldLabel
So the CSS code section would like so:
.formFieldLabel {
padding-bottom: 2px;
}
Below is the html code section for the checkboxes:
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-0" value="First Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-0" class="formFieldLabel">First Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-1" value="Second Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-1" class="formFieldLabel">Second Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="" style="overflow: hidden">
<table cellspacing="0" cellpadding="1" class="">
<tbody>
<tr>
<td width="20" align="left">
<input type="checkbox" name="Field 1" id="form_0006_fld_2-2" value="Third Choice">
</td>
<td width="*" align="left" style="padding-top: 3px; padding-right: 10px">
<label for="form_0006_fld_2-2" class="formFieldLabel">Third Choice</label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Resuming, the CSS code to make such item bold will need to go inside the following CSS code section:
.formFieldLabel {
padding-bottom: 2px;
}
Can anyone please help me implement this solution?
You could use :nth-child() selector in css to select the checkbox you want.
So maybe something like this to select the second checkbox:
tr:nth-child(2) table input { }
Not sure it the above css works but, you can use :nth-child() to select the <tr> you want from the parent table then from there you can select the input box in the child table.
You can use attribute selectors like this.
<style>
.formFieldLabel[for=form_0006_fld_2-0] {
font-weight: bold;
}
</style>
But you have to know the id of checkbox to do this.
or just add a second css class
class="formFieldLabel boldLabel"
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 am trying to make it such that the code will produce the below image, but it seems something is off with my table widths...any fixes? I'm still a n00b at HTML, thanks a million!! will upvote and accept the solution that fix my problem 100%
Code For table:
<table style="table-layout: fixed width="100%" cellspacing="0" cellpadding="2"><tr>
<td colspan="1" width="250"></td>
<td colspan="2" width="10"><span>Postanschrift</span></td>
<td colspan="3" width="5"><input type="radio" value="F" <span> Nein </span></td>
<td colspan="2" width="5"><input type="radio" value="F" <span> Ja</span></td>
<td colspan="1" width="15"></td>
<td colspan="2" width="10"><span>SMS / MMS</span></td>
<td colspan="3" width="5"><input type="radio" value="F" <span> Nein </span></td>
<td colspan="2" width="5"><input type="radio" value="F" <span> Ja</span></td>
</table>
<table style="table-layout: fixed width="100%" cellspacing="0" cellpadding="2"><tr>
<td colspan="1" width="250"></td>
<td colspan="2" width="10"><span>Telefon</span></td>
<td colspan="3" width="5"><input type="radio" value="F" <span> Nein </span></td>
<td colspan="2" width="5"><input type="radio" value="F" <span> Ja</span></td>
<td colspan="1" width="15"></td>
<td colspan="2" width="10"><span>E-Mail</span></td>
<td colspan="3" width="5"><input type="radio" value="F" <span> Nein </span></td>
<td colspan="2" width="5"><input type="radio" value="F" <span> Ja</span></td>
</table>
This is the image of the result of the expected code...pretty messed up :S
As you can see, the indentation before Postanschrift and Telefon works just fine ...however the later column widths are no longer fixed like in the image of the 'expected result'
EDIT 1: Using WebDevNewbie's code snippet, here's the result:
Style tag in <table> was not complete, and making your table fixed with your widths is what is crushing it all together. Removing the table-layout: fixed solved it for the most part, and I also had to widen the SMS / MMS <td> due to the spaces, it would push them to different lines.
Changing the widths on all of them would be a good bet.
<table style="width:100%; table-layout: fixed;" cellspacing="0" cellpadding="2">
<tr>
<td width="100%" style="background-color: #EEEEEE;"></td>
<td width="100px">
<span>Postanschrift</span>
</td>
<td width="60px" style="background-color: #EEEEEE;">
<input type="radio" value="F"/>
<span> Nein </span>
</td>
<td width="40px">
<input type="radio" value="F"/>
<span> Ja</span>
</td>
<td width="30px" style="background-color: #EEEEEE;"></td>
<td width="100px">
<span>SMS / MMS</span>
</td>
<td width="60px" style="background-color: #EEEEEE;">
<input type="radio" value="F"/>
<span> Nein </span>
</td>
<td width="45px">
<input type="radio" value="F"/>
<span> Ja</span>
</td>
</tr>
</table>
EDIT: Also, all the colspans weren't needed in this case. Those are if you want a <td> to span more than one column, which isn't needed here. There is also an empty cell that doesn't need to be there...
EDIT: I see why you are using that blank cell, a spacer. I have update the table, the first cell has a width of 100% now, this will allow for expanding, and I have increased the other widths..
EDIT: Closed the <input> tags, and formatted for readability..
I am constructing a webpage using fairly elementary techniques. I have three rows on a certain part of the webpage, each of which is structured as . The text units and the listbox units of the different rows are in perfect horizontal alignment, but the vertical spacing between the listboxes is inconsistent. Furthermore the vertical alignment of each listbox in relation to its paired text is different. I've tried readjusting the table structure and experimenting with valign, but to no avail. How do I fix this so that it looks neat? Thanks!
You could set the height of each td by css like
td {
height: 50px
}
also you should check out some tutorials on how to design forms without using tables http://www.cssdrive.com/index.php/examples/exampleitem/tableless_forms/
<form>
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%">
Please choose the test category:
</td>
<td align="left" width="50%">
<form action="">
<select name="categories" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%" valign="center">
Please choose the test:
</td>
<td align="left" width="50%" valign="center">
<form action="">
<select name="tests" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<table border="0" width="100%" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellpadding="0">
<tr>
<td align="right" width="50%">
Please choose the difficulty:
</td>
<td align="left" width="50%">
<form action="">
<select name="difficulties" style="width:20%;"></select>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
This is only the present state. I've tried other things with it.
Edit:
That includes the non-existence of any valign things in there. When I tried adding them, nothing happened.
I have a scoreboard on my website that gets scores from an XML file. It's very easy for others to update, except for highlighting the winner.
This is a sample game from the XML file:
<game>
<month>05</month><day>25</day><year>11</year>
<type>Football</type>
<homeName>Wildcats</homeName><homeScore>45</homeScore><homeWinner></homeWinner>
<awayName>Bruins</awayName><awayScore>55</awayScore><awayWinner>y</awayWinner>
</game>
As you can see, I want them to simply check the winner. However, when it loads in HTML, I want the y to be replaced with an arrow image.
It's a Spry scoreboard, so here's the relevant HTML:
<script type="text/javascript">
var dsScoreboard = new Spry.Data.XMLDataSet("scoreboard.xml", "scoreboard/game", {sortOnLoad: "date", sortOrderOnLoad: "descending"});
dsScoreboard.setColumnType("date", "date");
</script>
<div spry:region="dsScoreboard">
<table class="scoreboard" cellspacing="15" cellpadding="0" border="0">
<tr>
<td spry:repeat="dsScoreboard">
<table class="game" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="date month">{month}</td>
<td class="type" colspan="3">{type}</td>
</tr>
<tr>
<td class="date day">{day}</td>
<td class="winner">{awayWinner}</td>
<td class="name">{awayName}</td>
<td class="score">{awayScore}</td>
</tr>
<tr>
<td class="date year">{year}</td>
<td class="winner">{homeWinner}</td>
<td class="name">{homeName}</td>
<td class="score">{homeScore}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
So the output HTML for the winner cell should be something like:
<td class="winner"><img src="arrow.png" /></td>
instead of:
<td class="winner">y</td>
Can this be easily done? Thank you.
What you want is a spry:choose. I have never used spry, but it's something vaguely like this:
<td class="winner">
<span spry:choose="spry:choose">
<img src="arrow.png" spry:when="'{homeWinner}' == 'y'" />
<span spry:default="spry:default"></span>
</span>
</td>