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
Related
I need to get rid of this table's top border, but I can't use CSS for that.
I've tried using border-top-width="0" inside the <table> or after the style="width:100%;" but the border line just wont go away
<table border="1" cellpadding="0" cellspacing="0" style="width:100%;">
<tbody>
<tr>
<td style="width:50%">Name</td>
<td style="width:25%">Quantity</td>
<td style="width:25%">Value</td>
</tr>
</tbody>
</table>
Put style= border-top: none in the table tag
I have a HTML table in a <div>:
<div id="ticket_summary" style="height:60px;">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td colspan="2" bgcolor="#666666" align="left"><font color="#FFFFFF"><strong>Summary</strong></font></td>
<td bgcolor="#666666" align="right"><font color="#FFFFFF"><strong><?php echo $result["datetime"]; ?></strong></font></td>
</tr>
<tr>
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
</table>
</div>
I then have another table below:
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><div id="showticketupdates"><a onclick="show_ticketupdates()"><h3>Show Ticket Updates</h3></a></div>
<div id="hideticketupdates" style="display:none;"><a onclick="hide_ticketupdates()"><h3>Hide Ticket Updates</h3></a></div></td>
</tr>
</table>
the ticket_summary <div> is displaying over the link below. I think it has something to do with the style on the <div> - what can i add to stop it doing this?
Firstly, write this:
<div id="ticket_summary">
in place of:
<div id="ticket_summary" style="height:60px;">
Then, write this:
<td colspan="3"><div style="overflow-y: scroll; height: 60px;"><?php echo nl2br(stripslashes($result["summary"])) ;?></div></td>
in place of:
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
Instead of height, try making it to min-height, so:
<div id="ticket_summary" style="min-height:60px;">
Therefore it will extend when the length of ticket_summary div exceeds 60px.
Also try putting your second table in a div.
EDIT:
If you want to have a fixed height and just show a scroll bar when it exceeds your desired height, then just keep the height and add an overflow: scroll; to your ticker summary div:
<div id="ticket_summary" style="height:60px; overflow:scroll;">
Also, I noticed that you put an hr at the end of the table. But this will not be displayed if there's an overflow so I suggest that you just move the <hr /> at the end of the first table.
See this fiddle: http://jsfiddle.net/AmqRJ/
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.
I know very little html and pretty much no css. I would like to know the easiest way for me to change my left aligned text to center aligned within the cells. Someone on stackoverflow helped me to figure out how to center a table on my wordpress page with the following code:
<div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<table border="0">
<tbody>
<tr>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
I now need to figure out how to center the text within the cells. I have tried using align="center" beside the td. This showed the text centered in the wordpress admin area, but on the actual webpage, the text was still left aligned. Another guy recommended I put something in my header code and link it to the something. Again, I know very little about this and would appreciate the easiest solution. Thx.
Add the following CSS (CSS has to be added within <style> tags):
<style>
td {
vertical-align: middle;
text-align: center;
}
</style>
Also.. remove one of the <table> tags:
<table style="margin:0px auto;" border="0">
<table border="0">
should be
<table style="margin:0px auto;" border="0">
<td style="text-align:center"></td>
If you want every cell centered, the easiest solution for you is to add the above to every cell.
you dont need the div above or the style in the table tag, and only one table tag :)
<table>
<tr>
<td style="text-align:center">centered text</td>
</tr>
</table>
Here are two simple ways:
<td align="left">foo</td>
<td style="text-align:left;">foo</td>
EDIT
As others have mentioned, you also need to remove the nested <table> tags.
I built an HTML table:
<table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable">
<thead>
<tr>
<th class="asc" width="30"><h3>ID</h3></th>
<th width="200"><h3>Name</h3></th>
<th width="200"><h3>Artist</h3></th>
<th width="150"><h3>Album</h3></th>
<th width="60"><h3>Time</h3></th>
</tr>
</thead>
<tr class="evenrw">
<td class="evensl" align="center">i++</td>
<td align="left">link name</td>
<td align="left">name</td>
<td align="left">name</td>
<td align="center">name</td>
<tr>
<table>
the problem is that when I put something in a row so that the whole table becomes bigger, Is there anyway to make the height of the cell bigger instead the width of the cell?
You have a table width set as 1000px, and individual table columns set to a total with of around 600px. Tables a bit confusing with widths so remove the style="1000px" and that should fix the problem
jsfiddle example
If the answer works, please mark it as the chosen answer :)
PART TWO
To add a banner above the table, simply add another <div> above the table. So it would be
<div id="banner_or_something">
<!-- INSERT BANNER CODE HERE-->
</div>
<table cellpadding="0" cellspacing="0" border="0" style="width:1000px" id="maintable">
<!--TABLE CODE HERE-->
</table>
Use CSS div & class with td tags will help you.
e.g.
.aaa td{
width:200px;
/* all attributes you want*/
}
i hope it will help you