i want to remove space between table, heres my code
<table class="table table-striped-column" border="2" style="border-color: #0082AD">
<tr>
<th>Icon</th>
<th style="width:65%; text-align:left">Football Forums</th>
<th>Topics</th>
<th>Posts</th>
<th style="width:35%">Last Post</th>
</tr>
<!--INSERT DATA-->
<tr>
<td>Icon</td>
<td>
<table border="2">
<tr>
<td>link</td>
<td>view</td>
<td>image</td>
</tr>
<tr>
<td colspan="2" style="font-size:10px">ket</td>
</tr>
<tr>
<td colspan="2" style="font-size:10px">sponsored</td>
</tr>
</table>
i hve tried using margin 0 and padding 0, i also tried using cellpadding n cellspacing but its not working at all
and i want to remove this
You have a margin set on the table. Clear it on the nested tables using:
td table {
margin: 0;
}
Also, the border, cellspacing and cellpadding attributes are deprecated (since a long time). You should use CSS for that.
Related
I have a table structure like this
And the html structure is this
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div><!-- Tree structure is loaded here dynamically --></div>
</td>
</tr>
<tr>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
If you see the image, the Operations columns height is adjusting itself based on the Hierarchy columns height, I am looking for some way if possible to have the heights of operation column fixed say 10px and whatever space is left the last row's operation column should consume it.
So the operations column will not looke weird having so much height.
Is it possible?
the approach you are using is correct, you can use rowspan="2" on the last row as shown in my snippet.
table {height: 600px}
table td {border:1px solid red; vertical-align:top}
td.history-text {height: 20px}
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div>Tree structure is loaded here dynamically</div>
</td>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text" rowspan="2">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
How is that possible that this work:
<TABLE>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
but if I put spaces between "-" it doesn't. I knew that it doesn't matter in HTML the position of elements(I mean, in this case). Why?
CSS solution:
If I get it right, you want to put - between two spaces, so you will simply need to simulate this using padding: 0px 5px; with your td elements, this is a snippet DEMO:
table td {
padding: 0px 5px;
}
<TABLE>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
</TABLE>
This will show - as " - " inside the td elements.
HTML solution:
If you want to use HTML only without CSS, the solution will be to use cellpadding=5 with your table, this is a working snippet:
<TABLE CELLPADDING=10>
<TR>
<TD onclick="play('cell1')" id="cell1">-</TD>
<TD onclick="play('cell2')" id="cell2">-</TD>
<TD onclick="play('cell3')" id="cell3">-</TD>
</TR>
<TR>
<TD onclick="play('cell4')" id="cell4">-</TD>
<TD onclick="play('cell5')" id="cell5">-</TD>
<TD onclick="play('cell6')" id="cell6">-</TD>
</TR>
<TR>
<TD onclick="play('cell7')" id="cell7">-</TD>
<TD onclick="play('cell8')" id="cell8">-</TD>
<TD onclick="play('cell9')" id="cell9">-</td>
</TR>
</TABLE>
But this will make spaces between tr elements too, in other words it will make padding-top and padding-bottom too for your td elements.
Conclusion:
So your requirements will be better achieved using paddingin CSS, now it's up to you to choose the right solution.
i want to;
1.remove a small part of this table and make a free space there.i comennted it on the code.
2.also to center the words in the table.
CAN ANY ONE HELP ME PLEASE?(Please use only HTML not css or javascript)
<html>
<head>
<title>My First Webpage</title>
</head>
<body >
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td ></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
</body>
</html>
It's best practice to use CSS for the centering. You could do it like this:
<table style="text-align:center">
But you could also use HTML in each cell like this:
<td align="center">Text</td>
or like this:
<td><center>Text</center></td>
Tables aren't meant to skip cells, so different browsers will handle it differently. You won't get consistent results. Depending on what you need the blank space for, though, there are some workarounds you could use.
If you just want the cell to be empty, put a sticky space inside like this:
<td> </td>
Some browsers are confused by empty tags, but adding a sticky space (which displays as a space- you can't see it) fixes that.
If you want the cell to have no background / border, so it looks like it isn't there:
<td style="background:none; border:none">
That's embedded CSS, and I've included it because the HTML version is deprecated and you're really supposed to use CSS instead, but here's the HTML:
<td bgcolor="#000000" border=0>
You must replace #000000 with the color behind the table. If there's an image or text behind the table, you could use a transparent image as the background instead. (I wouldn't advise going to all that trouble if there's any way you can use style="background:none" instead, though.)
You could make the cell following the one you're removing span the space of both of them:
<td colspan=2>9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
Another solution is to put tables inside a table.
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td align="right"> <!-- The content is aligned to the right so that the blank space will be on the left. -->
<table width="80%"> <!-- The width of four out of five cells is 80% of the total width -->
<tr>
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
As you can see, there are a ton of different ways to approach the problem. HTML leaves a lot of room for experimentation and creativity.
jF: http://jsfiddle.net/theStudent/b9tGV/1/
I would say you will have to use some CSS, that would be the most professional way to go about doing it.
I have started you off so you can see how that works in above link, it is quite simple and there is lot of tutorials and samples online just do little research.
Sample I started you with is very plain needs more work.
best of luck I believe that is a good start
HTML
My First Webpage
<body >
<table width="80%" cellspacing="0" cellpading="0" >
<tr>
<td class="no-border"></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td class="border">9-11</td>
<td class="border">11-13</td>
<td class="border">13-15</td>
<td class="border">15-17</td>
</tr>
<tr>
<td class="border">Monday</td>
<td>6</td>
<td colspan="0" class="border">7</td>
<td rowspan ="3" class="border">Lunch</td>
<td class="border">a</td>
</tr>
<tr>
<td class="border">Tuesday</td>
<td class="border" colspan="2">< free</td>
<td class="border">s</td>
</tr>
<tr>
<td class="border">Wedensday</td>
<td class="border">a</td>
<td class="border">s</td>
<td class="border">5</td>
</tr>
</table>
</body>
</html>
CSS
.no-border{
border: none;
}
.border{
border: 1px solid #000;
text-align:center;
}
I have table with few rows. I want 1st and 3rd row height to be set to 1 px and the 2nd row to normal height. But my code is not working.
HTML CODE goes below
<table border="0">
<tr style="height:2px;" >
<td width="10"><hr></td>
</tr>
<tr style="height:20px;" >
<td width="10">Hello</td>
</tr>
<tr style="height:20px;" >
<td width="10"><hr></td>
</tr>
</table>
Could anyone please tell me how to do it ?
Note: I dont want borders to be used because i Want for certain rows i may or may not need the horizontal line inside the rows.
Add style="padding:0px; margin:0px;" to your hr and change the height of your third tr to 2px
You will have :
<table border="0">
<tr style="height:2px;" >
<td width="10px"><hr style="padding:0px; margin:0px;"></td>
</tr>
<tr style="height:20px;" >
<td width="10px">Hello</td>
</tr>
<tr style="height:2px;" >
<td width="10px"><hr style="padding:0px; margin:0px;"></td>
</tr>
</table>
I am wondering whether it is possible to have a fixed table layout and have one column in the middle with a wider width than all the others...?
I'd appreciate any help! :)
Thanks,
Piotr.
Just add the style=\"width: 20%;\" to the th (or td) tag of that column. Check [1]:
<table style="table-layout:fixed; border: 1px solid black; ">
<tr>
<th style="width:30% ">name</th>
<th style="width:70% ">Color</th>
</tr>
<tr>
<td>N1</td>
<td>red</td>
</tr>
<tr>
<td>N2</td>
<td>blue</td>
</tr>
</table>
[1] http://jsfiddle.net/AP5rL/1/
Just set the width attribute on the TD tag corresponding to the wider column.
Example:
<table width="650">
<tr>
<td width="100">normal</td>
<td width="100">normal</td>
<td width="250">wide</td>
<td width="100">normal</td>
<td width="100">normal</td>
</tr>
</table>
Can you add a class to the column that needs a different width? If so, you can use the class to manipulate width:
HTML
<table width="650">
<tr>
<td>normal</td>
<td>normal</td>
<td class="wider">wide</td>
<td>normal</td>
<td>normal</td>
</tr>
</table>
CSS
td.wider {
width: 250px;
}