In asp.net I have created a table:
<table border="1" align="right" class="detailstable StartOnNewPage">
<tr>
<td style="text-align:left; width:100px;">Miscellaneous</td>
<th style="text-align:right; width:100px" class="FadeOutOnEdit"><%: this.FormatMoney(MiscellaneousItemsTotal) %></th>
</tr>
<tr>
<th style="text-align:right; width:100px;"><%: this.DisplayMiscellaneousPercentage%></th>
<td style="text-align:right; width:100px;"><%: this.MiscellaneousToDisplayWithTwoDecimalPlaces%></td>
</tr>
<tr>
<th style="text-align:left; width:100px;">TOTAL</th>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(TotalOfAll)%></th>
</tr>
</table>
<br />
<br />
<br />
If the align of the table is set to 'right' it doesnt pick up the 3 <br />, but if I set the table to align="center" it does...any ideas as to why this is?
Normally, an HTML table will have a break before and after it. The
align attribute allows other HTML elements to wrap around the table.
So your breaks are actually to the left of the table when you use right align.
The align attribute is now deprecated so should not be used.
Put your table styling, including all that style hardcoded for td and th, into your css file.
AS #Joe R said it is depracated ,I suggest you use margin-bottom:10px; for this purpose.
Related
I have an alignment issue where the alignment of the background color of the first cell is little more compared to the other cell. I don't know why is it happening.
As in the screen shot the cell which has week has the alignment little higher compared to other cell. Why is this happening ?
How am I supposed to make it aligned properly? Please help me.
I updated your fiddle and added some background colors to it, as you can see in below html fragment.
<td style="text-align: left; padding-left: 10px;background-color: lime" >
<div class="ng-binding" ng-class="{'TODAY': 'todayDate'}[event.dayType]">Fri 1.</div>
</td>
<td colspan="7" style="background-color: red">
<table id="test" style="table-layout: fixed;background-color: aqua">
<tbody>
I've been trying to reset some of those element's CSS value, though they don't kick in, which makes me believe there is other settings somewhere in your CSS files using the same properties, likely with !important.
So, if you check the fiddle you'll see that the recolored td's is different in height and that should narrow down your problem.
Now it would be easier for your to check those settings, alter them some, to see how you can give them the same height.
One observation I made is, if you add a text like this <td colspan="7" style="background-color: red"> Test text <table id="test", you'll see that the red background appear and that background color doesn't have the alignment issue.
Here is one more fiddle update showing that: https://jsfiddle.net/enypgyt3/4/
<p>You should use proper table format like</p>
<p>Table should be proper nested </p>
<p>Table td and tr is not nested properly</p>
<p>Try to comment every table row(tr)</p>
<table border="1" cellspacing="0" cellpadding="5"> <!--table start------->
<tr> <!--tr start-->
<td>
<table>
<tr>
<td>one</td>
<td>Two</td>
<td>Three</td>
<td>four</td>
</tr>
</table> <!--/table inside td open and it should properly closed-->
</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr> <!--/tr end-->
<tr> <!--second row statr-->
<td colspan="4"> <!-- User proper Colspan for every td -->
One-four five six seven
</td>
<td>
Eight
</td>
</tr> <!--second row stard-->
<tr> <!--Third row start-->
<td colspan="5">
One-four five six seven eight
</td>
</tr>
<tr>
<td>One-four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
<p>If possible try comment maximum tr and td </p>
<p>Follow code indentation</p>
A partial view that I have is throwing an error:
{"Encountered end tag \"tr\" with no matching start tag. Are your start/end tags properly balanced?\r\n"}
I cannot find where the tag is not closed. I have spent a significant amount of time trying to find the error, to no avail.
I am relatively positive it has to do with the code elements I have in the view, but I am unable to pinpoint it.
This is the Razor view.
#{
DateTime dateValue;
}
<div class="table-responsive">
<input type="checkbox" class="checkallMaster" />
<table id="reportTable" class="table table-hover table-condensed table-striped">
<thead>
<tr>
<th style="text-align: left;">Variable Investment Option</th>
<th>Unit Value<br /><span style="font-weight: normal;">#Model.Start.ToString("dddd, M/d/yyyy")</span></th>
<th>Start Date</th>
<th>Select Values<br />To Download<br /><input type="checkbox" /></th>
</tr>
</thead>
<tbody>
#foreach (System.Data.DataRow row in Model.Output.Rows)
{
<tr>
<td align="left">#row.ItemArray[1].ToString();</td>
<td align="right" width="50px;">#row.ItemArray[2].ToString();</div></td>
<td align="center">
if (DateTime.TryParse(row.ItemArray[3].ToString(), out dateValue))
{
#Html.Raw(dateValue.ToString("M/d/yyyy"));
}
else
{
#Html.Raw("N/A");
}
</td>
<td align="center"><input type="checkbox" name="FundCodes" value="#row.ItemArray[0].ToString()" class="checkall" /> </td>
</tr>
}
</tbody>
</table>
</div>
You're closing a div in the middle of a td:
<td align="right" width="50px;">#row.ItemArray[2].ToString();</div></td>
This is going to try to close the div that contains the whole table, which means the table structure bleeds out from the div. Anything thereafter is going to be undefined and essentially a markup error.
Also note that you don't need semi-colons to terminate your Razor syntax statements. I imagine those are actually going to render to the browser as semi-colons, which you probably don't want.
I'm creating a table in html. Wanted the table to come out at the center of the screen, and found this question showing me exactly how to center the table in HTML.
However, as much as it did help make my table appear at the center of the screen, it also added an additional row, atop the first row when I added these lines to my code:
<table border="1px" align="center">
<td align=center valign=center>
Here's a preview of my current table (with slight distortions):
<head>
<style>
table, th, td {
border:1px solid black;
}
</style>
</head>
<body>
<table border="1px" align="center">
<td align=center valign=center>
<col style="width: 200px" />
<col style="width: 300px" span="2" />
<tr>
<th scope="row">Degree</th>
<td colspan="2">Bachelor of Multimedia</td>
</tr>
<tr>
<th scope="row">University</th>
<td colspan="2">Universiti Utara Malaysia</td>
</tr>
<tr>
<th rowspan="2">Contact</th>
<th>Telephone</th>
<th>Email</th>
</tr>
<tr align="center">
<td>019-xxxxxxx</td>
<td>blah#gmail.com</td>
</tr>
</table>
</body>
You don't need the second line of code you added you jsut need
<table border="1px" align="center">
Remove
<td align=center valign=center>
FIDDLE
The best way to have a table centered in a page is using the margin:0 auto in your CSS. If you want to use it inline(not a recommendation), use it this way: style="margin:0 auto".
Try to use CSS property instead of border, align or valign.
But your real proble come from this line td align=center valign=center>. A td is a column that need to be in a tr(a row). But in fact, yo do not even need this line.
Hope this help!
Just remove the 2nd line of your code:
<td align=center valign=center>
and it should work, here is a fiddle
In the below code, the table which is supposed to be below the div ends up colliding with it and showing up in the middle of it.
Any help is welcome.
Fiddle here
<div id="header" width="100%">
<center>
blabla
</center>
<table align="left" class="header">
<tbody>
<tr>
<th>Links</th>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
</tbody>
</table>
<table align="right" class="header">
<tbody>
<tr>
<th>contacts</th>
</tr>
<tr>
<td>this guy</td>
</tr>
<tr>
<td>that other guy</td>
</tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<th>the table that shouldn't be here</th>
<th></th>
</tr>
</tbody>
</table>
You just need to "clear: both" when you don't want an element to be affected by other elements' float value (or align in this case).
Here is what is happening, your first table is attached to the left, your second to the right, and the third is trying to fit between the two.
You can tell the third table to find an empty line to start on by using style="clear: both"
Working fiddle here.
notice the:
style = "clear: both"
on the bottom table
A couple of things:
You're using <center>, which is deprecated, according to
W3C:
The element was introduced in HTML 3.2 - Block elements. It
has been deprecated since HTML 4 - 15.1.2 Alignment.
HTML5 classifies it as a non-conforming feature.
In the jsfiddle you linked, the table seems to be below the div, so
I'm not sure what the problem is. Can you clarify?
I'm having an object in a table and I'm unable to set vertical align (it doesn't seem to work).
Why is that?
Example:
http://jsfiddle.net/PHDWz/1/
When I give the td a height.. the content is vertical aligned in the middle....
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td height="400">Bla bla bla! Write something if you like! </td>
<td>
<textarea></textarea> <span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
</table>
just add an additional column to avoid the "A printer!" link being forced to be kind of attached as align-bottom to the textarea. In your css you may omit the vertical-align for the span as you have this duplicated in the outer td.
<table cellspacing="0">
<thead>
<tr>
<th scope="col" style="width: 180px">Description</th>
<th scope="col" colspan="2">Textarea</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bla bla bla! Write something if you like! </td>
<td><textarea></textarea></td>
<td><span><img src="http://www.qualtrics.com/university/wp-content/plugins/wp-print/images/printer_famfamfam.gif" alt="printer"> A printer!</span>
</td>
</tbody>
The text in the left column sits in the middle vertically when I extend the textbox. This is using Safari, please elaborate if something else