In the "table style" portion of my code, is there a way for me to adjust the space between the columns in a table? Also, what attribute should I put in to make sure the tables position is aligned completely to the left and top?
<table style="width: 960px; height: 81px;" border="0">
For current and future compatibility use CSS:
// cellspacing
table { border-collapse:separate; border-spacing: 5px; }
To make sure the table is aligned to the left and top, remove any top and left margins. You might also want to change the positioning (position:relative or position:absolute) based on where the table need to exist.
Ref: border-collapse | border-spacing
cellpadding controls the gaps inside cells and cellspacing controls the space between them.
<table style="width: 960px; height: 81px;" border="0" cellpadding="0" cellspacing="0">
As for alignment, you control this within table cells:
<td align="left" valign="top">
you can try with cellspacing property in order to create space
Related
Blog: www.amedecrwanda.blogspot.com
On the homepage post I've set the table as: <table cellpadding="0" cellspacing="50">
But it affects spacing at the top too, pushing the table further down the page. Anyone got a fix for this - to keep spacing between columns the same, but remove the gap at the top?
Remove those lines:
<div class="post-header">
<div class="post-header-line-1"></div>
</div>
Make cellspacing zero for table. Add margin for for that particular table using CSS. In this way, you can control the way space (margin) from top.
<style>
table td{
margin:20px;
margin-top:0px;
}
</style>
<table cellspacing="">
...
</table>
Replace this code <table cellpadding="0" cellspacing="50"> with <table cellpadding="0" cellspacing=""> and yes of course you should add the css styles advised by #vishal kokate
Why right and down border is invisible?
Here is my table:
http://jsfiddle.net/dFu5e/
You're writing white TD borders over the table border.
You can fix the problem by setting the table border to 2 px.
DEMO
But instead of all those border definitions, I would recommend for next time to use CSS. There are many tools helping you define the CSS of tables for your goals. For example :
http://www.somacon.com/p141.php
http://www.css-generators.com/css-tools/css-table-generator
Remove tr and td border.
Use border="1" and cellpadding="0" and cellspacing="0" for table tag:
<table border="1" cellpadding="0" cellspacing="0">
....
</table>
Or you can remove the overflow: hidden from the table.
It is because you are using overflow:hidden. modified jsfiddle
Remove overflow: hidden; from your table style, fiddle here.
I have created a couple of tables. now i need both tables to be next to each other and not one table on top of each other. how can i position the second table next to the first one (to the right) but with sufficient space in between?
this is some code of my second table:
<table>
<h3>Personaldaten</h3>
<tr>
<td>Externe Referenz:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
<tr>
<td>Titel:</td>
<td colspan="2">
<input class="LargeText" type="text" style="width: 150%">
</td>
</tr>
above are 2 entities from the first table, how do i proceed like this?
Try to use a wrapper around the tables and use float:left;
//margin: top right bottom left
<div style="width:500px; margin: 30px 0px 0px 320px">
<table style="width:240px; float:left; margin-right:20px;">
</table>
<table style="width:240px; float:left;">
</table>
</div>
get rid of your absolute positioning if you don't really need it and use CSS like
table{
float:left;
margin:0px 5px;
}
You have two choices really.
If you're happy creating your layout with tables, then put both of your tables within another table. i.e.
<table>
<tr>
<td>
<table>{ table 1 stuff }</table>
</td>
<td>
<table>{table 2 stuff }</table>
</td>
</tr>
</table>
Or you can start looking into 'float'ing your elements.
You can create a new table with 1 row and 2 columns and place your first table inside the first column and your second table inside the second column.That way both tables can be displayed side by side
If it were me, I would surround your tables in a div layer, specifying the width and height of the div layer to force the tables next to each other.
For example:
<div id="tablecontainer">
<table id="lefttable"></table>
<table id="righttable"></table>
</div>
And in the CSS:
table
{
margin: 5px;
}
#lefttable
{
float: left;
}
Obviously, this code isn't going to be exactly what OP wants, but you get the idea.
Either use float: left or display: inline-block.
#1:
table {
margin: 10px;
float: left
}
#2:
table {
margin: 10px;
display: inline-block
}
See http://shaquin.tk/experiments/tables2.html and http://shaquin.tk/experiments/tables3.html.
First, fix the syntax and styling. A table element cannot have an h3 child. Either put the h3 inside a cell (which is inside a tr), or turn it to a caption. Don’t set a width of 150%, as this would make the a cell occupy 150% of the width of the available space. The width of an input field set is best set in characters, using the size attribute in HTML.
Then you can float the tables in CSS as suggested in other answers, or by using align=left in table tags. To create horizontal spacing between the tables, you can set e.g. margin-right on the first table.
Note that for usability and accessibility, forms should normally be presented so that there is one input item with its label on one line, so that filling out the form proceeds vertically in a simple manner. So you might be solving the wrong problem.
I have an HTML page which repeats the following table multiple times. Currently the two cells equally share half the page. I'd like to place a border between them that runs vertically down the centre of the page. I've tried placing right borders on the cells of the left cell, but it doesn't produce a uniform border because of the spacing between the cells, and the spacing between the separate tables.
Does anyone have any suggestion as to how I could create this uniform border through the centre of the page?
<table class="ex2" width="100%">
<tr>
<td width=50%>Test Title - Left</p></td>
<td width=50%><p style="font-family:verdana;color:red">Test Title - Right</p></td>
</tr>
<tr>
<td width=50%><p style="font-family:verdana;color:grey">Test Body - Left</p></td>
<td width=50%><p style="font-family:verdana;color:grey">Test Body - Right</p></td>
</tr></table>
Your table does not mention what css is on it already. If there is no top/bottom margins on the table then using border-collapse: collapse on the table works, see http://jsfiddle.net/GY7CW/3/.
If you have top/bottom margin on the tables, and don't care about IE7 or below, then you can use a wrapping element styled to give you the border via a :before pseudo element, see http://jsfiddle.net/GY7CW/2/.
To remove the extra space between the cells you could use:
<style type="text/css">
table.ex2{
border-collapse: collapse;
}
</style>
Okay I've figured out a simple although potentially simplified solution (if you want to use js/jquery/etc)
There are probably better ways to do what you want (i.e not using tables) but here you go haha
<style>
.addborder {
border-right: 1px solid #666;
}
.addspace {
padding-left: 20px;
}
.ex2 { padding: 0px; margin: 0px; }
</style>
for the css and
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ex2">
<tr>
<td class="addborder" width=50%>Test Title - Left</p></td>
<td class="addspace" width=50%><p style="font-family:verdana;color:red">Test Title - Right</p></td>
</tr>
<tr>
<td class="addborder" width=50%><p style="font-family:verdana;color:grey">Test Body - Left</p></td>
<td class="addspace" width=50%><p style="font-family:verdana;color:grey">Test Body - Right</p></td>
</tr></table>
for your table html ;)
Hope this helps!
I have an html table in which I am placing images side by side inside the td's. How can I get it so that there is no space at all between each image? By default all browsers seem to put in a small space despite 0 padding and margin on each table element. I am not specifying a width on the td's so by default it takes up the width of the image inside of it.
i.e:
<table>
<tr>
<td><img ... /></td> //no space between the td's
<td><img ... /></td>
</tr>
</table>
One more thing that can avoid unwanted space between images:
<td style="line-height:0;">
Apply this css:
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse; }
This resets all spaces to 0.
cellspacing and cellpadding should be 0 on the table.
<table cellspacing="0" cellpadding="0">
<tr>
<td><img></td>
<td><img></td>
</tr>
</table>
Take a look at cellpadding, border, and cellspacing attributes for the HTML table tag. If you are using XHTML or CSS, then check out the corresponding styles - border-collapse, padding, etc.
On my situation, I am trying to continue coding photoshop / imageready splitted html (generated via slice tool or save for web).
If table have a "height" attribute and you replace some images with shorter content, table maintain height adding mysterios gaps between images.
All I have to remove the height. Simple and stupid, but this is a situation can happen.