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
Related
I want to write the simpliest example of the following image
My example should work in ie6,7,8,9 and so on. So I can't use float or anything helpfull. I made jsFiddle using table
<table width="500px">
<tr>
<td width="45px"><span>e-mail</span>
</td>
<td align="center"> <div style="border-bottom: 1px solid;">test#gmail.com</div></td>
</tr>
<tr>
<td width="45px"></td>
<td align="center"> <span>(email)</span>
</td>
</tr>
</table>
, but the bottom (email) have margin from the line.
And I want that everything was like on my first image. Thanks
I have tried this.
Check this jsFiddle link
<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
<td width="45px" style="padding:0px"><span>e-mail</span>
</td>
<td align="center" style="padding:0px"> test#gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>
</tr>
<tr>
<td width="45px" style="padding:0px"></td>
<td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>
The “margin” you are referring to is partly spacing between cells, partly padding inside the cell, partly leading, and partly spacing in the font. In your approach, the simplest fix is probably to set cell spacing to zero and to move the cell content upwards a bit, using relative positioning.
<table width="500" cellspacing="0">
<tr>
<td width="45">e-mail
</td>
<td align="center" style="border-bottom: 1px solid">test#gmail.com</td>
</tr>
<tr>
<td width="45"></td>
<td align="center"><span style="position: relative; top: -0.15em">(email)</span>
</td>
</tr>
</table>
apply border-spacing: 0 to the table's style (border-collapse: collapsewould work too, aswell as cellspacing attribute)
add padding: 0 to the tdcontaining <span>(email)</span>
To increase the space between the upper e-mail-adress and the bottom border (which you did not mention explicitly but is not the same as your example image):
move the border-bottom style from div to its parent td
add a padding-bottom to the same td
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 want to make text float to the very bottom right hand corner of an existing tag.
I'm still using old school tables (editing existing code). My code is this:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50%"></td>
<td width="50%" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top">KEEP UP TOP</td>
</tr>
</table>FLOAT BOTTOM
</td>
</tr>
</table>
The text that says FLOAT BOTTOM, doesnt obviously. How do make it so that always stays at the very bottom right corner?
The usual way to do this with tables is
Create a second row
Give that row (and the cells therein) a fixed height
Put the text into the right hand column in the second row
One CSS way to do this (without tables) would be
Give the container you want to place the text in the bottom right corner of position: relative
Wrap the text inside a <span>
Give the span position: absolute; bottom: 0px; right: 0px
Use style {style="vertical-align:baseline; text-align:right"}
Try this:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="50%"></td>
<td width="50%" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" valign="top">KEEP UP TOP</td>
</tr>
</table><p style="position:absolute; bottom:0px; right:0px;">FLOAT BOTTOM</p>
</td>
</tr>
</table>
To make it float to the bottom right of the data cell that contains it you could probably do
<span style="float:right; vertical-align:text-bottom">FLOAT BOTTOM</span>
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
<table width="100%" border="0">
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="120">Banner Image</td>
</tr>
<tr>
<td width="400" colspan="80"></td>
<td width="10" colspan="2" bgcolor="yellow"></td>
<td width="190" colspan="38"></td>
</tr>
</table>
</table>
The alignment is messed up for the 2nd row. How can it be resolved?
Looks like there are a lot of issues here.
First off, this isn't valid html. The second table tag can't go where you have it. You need to do something like:
<table width="100%" border="0">
<tr><td>
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</table>
</td></tr>
</table>
Which will probably solve your immediate problem. However, why on earth do you have 120 columns? That seems wrong by any standard.
Note I removed the colspan because it's use here seemed very inappropriate.
Also, you might ask yourself why you have the outer table tag anyway. It's not exactly doing anything for you that can't be done in a better manner.
Colspan is used to indicate how many COLumns a single column SPANs, not to indicate a pixel width, as it would appear that you are trying to do here.
Instead, use colspan to indicate how many columns a single column should span, and indicate the width of columns either using css styles or the "width" atttribute.
See this example:
http://jsfiddle.net/xixionia/yt3gf/
The second table should be better if you placed it inside a td on the first table. Then on the second table there's a lot of colspan.
<div>
<table>
<tbody>
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</tbody>
</table>
</div>
I do prefer to use div in place of table. But you still have a choice. As you can refer to the other post.
You would try:
<table width="100%" >
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="120">Banner Image</td>
</tr>
<tr>
<td style="width:400px;" colspan="80">a</td>
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>
<td style="width:190px;" colspan="38">c</td> </tr>
</table>
</table>
I add "border=1" and text in the cells in order to see the changes.
You got a table inside a table directly and thats not "valid".
Considering:
I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190
You should have:
<table style="width:100%; background-color: #fff;">
<tr>
<td colspan="3">Banner Image</td>
</tr>
<tr>
<td style="width: 66.6%"></td>
<td style="width: 1.6%; background-color: yellow;"></td>
<td style="width: 31.6%"></td>
</tr>
</table>
You are clearly trying to use tables to make layout wireframes. You should research more about CSS and html5.
This answer will probably fix your code but not the logic you are trying to apply.