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
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'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
I am having an issue with one of my Table's setup in my HTML. I have three header titles and for some reason they are not occupying the complete 100% width. However, the body does occupy the 100% width. I'm not quite sure what is going on. I have another table that works just fine. I have attached an image and the html code of the table. The display will still be the same as it is in the image below even if I remove the specified width percentages. Any help would be much appreciated! Thanks in advance!
<table id="timePreferenceTable" class="table-striped" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th width="34%">Start Time</th>
<th width="34%">End Time</th>
<th width="32%">Days</th>
</tr>
</thead>
<tbody></tbody>
</table>
Try to set width="100%" on your table. I am not sure what your class does. if it is not setting the width 100% then do it.
<table width="100%" id="timePreferenceTable" class="table-striped" cellpadding="0" cellspacing="0" border="0">
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 have some problem using HTML tables.
Below I have a table structure.
<table>
<caption>Movie Details</caption>
<thead>
<tr>
<th axis="m" header="movie">Movie Name</th>
<th axis="g" header="genre"> Genre</th>
</tr>
</thead>
<!-- note: rows generates dynamically using loop -->
<tbody>
<tr>
<td axis="m">Aanjana Anjani</td>
<td axis="g">Romance</td>
</tr>
<tr>
<td axis="m">Bodyguard</td>
<td axis="g">Romance</td>
</tr>
<tr>
<td axis="m">Gajini</td>
<td axis="g">Action</td>
</tr>
<tr>
<td axis="m">Singham</td>
<td axis="g">Action</td>
</tr>
</tbody>
</table>
Currently this table is sorted by movie name, now
Is there any way that, if I swap the column in <thead> then <tbody>,
data is swapped automatically (means tbody looking to thead and then
display ) using only HTML?
means if I change the column order ( genre is first column now),
<th axis="g" header="genre"> Genre</th>
<th axis="m" header="movie">Movie Name</th>
then column of each row of <tbody> should be changed.
I think the axis and headers attributes may be helpful for this but not getting the exact.
Reference for axis in headers.
You can if you're willing to consider (just a little) CSS. In the example below, you "switch columns" simply by swapping the names of the CSS classes. (that is, change .right to .left, and .left to .right). You don't have to make any changes to the HTML in the table itself.
<style type="text/css">
.right {width:100px; float:right;}
.left {width:100px; float:left;}
</style>
<table>
<thead>
<tr>
<td width="250px">
<div class="right">LEFT</div>
<div class="left">RIGHT</div>
</td>
</tr>
</thead>
<tr>
<td width="250px">
<div class="right">L Data</div>
<div class="left">R Data</div>
</td>
</tr>
</table>
What do you mean by "if i change the column order"?
You can only change the HTML structure in real time using JavaScript.
If you want to change it without JavaScript you then have to reload the page with a server side language like PHP which will sort the table and write the HTML code differently.
Anyway you choose, swapping only the <thead> content or replacing it is not enough. You still have to replace/change the content of the <tbody> also to see the items sorted in the new way.