So I have a table.
First thing I want to do is put some space between two rows of the table. I tried inserting a <br /> in between the two <tr> elements, but that only put space above the ENTIRE table (don't know why).
Second thing I want to do is center a picture in a column so it lines up in the middle of the text in the column below it. I tried placing an align=center on the <td> element to no avail.
Have you tried changing the CSS for the table rows and possibly adding a : padding-bottom: x px; or margin-bottom: x px; to gain the space that you would like in the table.
Also - I believe that you would need your "align=center" property to be a "text-align: center".
Putting spaces between the table rows won't work. All that content will be placed above or below the table. Styling the table must be done using CSS. Try something like:
td{
padding: 5px 0;
}
Use CSS, as HTML is for structure. Here is a link to W3C tutorial on styling tables with css In fact, if you are using tables for positioning, that is bad practice too - again use CSS.
Related
Need assistance adding padding to the main body text of this emailer so the text does not look quite so tight to the border.
It's probably a simple solution but I can't work out which table to add the cell padding property to.
live version -> http://garyrevell.co.uk/mercy2013/2013-temp/alt-april-mailer/index-purple-final.html
Pastebin of the code -> http://pastebin.com/PAbYgqXN
Help would be much appricated.
Always add padding the the table cell that the content is in. eg:
<td style="padding:30px;">
<singleline>your content</singleline>
</td>
It looks like your content however is living outside of tables in divs instead. You should lose the divs and put everything into td sections. Also, don't have a table next to text inside a parent td, instead have a table cell for each (use table rows if stacking them).
HTML structure
I've got the following html structure: This is a fixed structure that I can't edit
<div class="separator"></div>
<table class="myClass">
<thead>
<tr>
<th>title1</th>
<th>title2</th>
</tr>
</thead>
...
</table>
<div class="separator"></div>
CSS
The first and last div are separators whose css is:
.separator {
height: 20px;
background-color: gray;
}
Note that separators are complex widgets and not only design (I've intentionnaly simplified the example)
The problem
I want to position the table header before the first separator but the table body must remain between the two separators.
What I have tried
Here is the initial jsfiddle for testing:
http://jsfiddle.net/prhgW/1/
I've tried to position absolute the thead tag and use negative top
values but when doing so, the width of the thead is smaller than
100% of the table and so column titles are misplaced regarding the
column value. the fiddle: http://jsfiddle.net/prhgW/2/
I've also tried to put the width at 100% but the tr tag do not
follow that rules : http://jsfiddle.net/prhgW/3/
Additional rules
I would like to avoid fixed width/height of the table or any element (so, absolute positioning everything is not acceptable solution)
I would like cross browser compatibility
avoid javascript fix (pure css would be better)
Is this applicable to your problem?
http://jsfiddle.net/prhgW/16/
I added some space beneath the <th> and shifted the first separator down. This works if you know the height of the separator AND the <th>.
I've been toying with this in pure CSS, here's my forked fiddle.
Basically, I use the immediate sibling combinator .separator + .myClass to target the table following the separator. I then move the whole table up so the headers line up just above the separator. This move is compensated with an identical margin-bottom so the content below the table neatly follows the table. Finally, I put some padding on the header cells in thead to push tbody below the separator.
Possible caveats:
The separator height needs to be fixed and known. This is probably not too much of a problem.
The height of the headings needs to be fixed and known. I used 1em as default.
If there is content right above the separator, it may be overlapped by the table. This is inherent to the problem: you can't conditionally apply more padding to the separator. You can target a table following a separator, but you can't target a separator which is followed by a table. The sibling combinator only works for elements following a previous sibling, not the other way around.
If all you want is a gray line below the Table title and below the last row, you can use css border property to set the style as in here
http://jsfiddle.net/vzGtF/
I have removed the seperator class and the div using the classes.
Hope the helps.
I used a little bit of jquery to append a row below the titles of your table.
<script>
$(document).ready(function(){
$('.myClass thead').append('<tr><td class="separator" colspan=2></td><tr>');
});
</script>
Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/
I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.
What have I done wrong in the example, and must I change to make them on the same margin-top line?
Thanks, I have tried to be as clear as possible.
What I mean is that they should share the same margin-top line, but they don't, and what must I do to fix this?
You just need something like:
td { vertical-align: top;}
Example fiddle
This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.
Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.
eg.
<div class="stylized myform">
Just add to your css:
td {vertical-align:top;}
Adding valign="top" will make the column on the left align to the top of the row.
The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.
I am designing a very simple table that contains a data element's properties. This element will be used to represent each element of a AJAX response in a kind of list.
The table is using "rowspan" and "colspan" to enlarge some cells. The problem, is that when I add an element below, this element overlaps the table, I don't know why. The HTML is valid, and the rowspan attributes indicate the exact amount of rows to merge.
I have deployed an example here: http://jsfiddle.net/vtortola/KzjKg/9/
As you can see, the green block overlaps the table, and that is the thing I want to avoid.
Any idea why is this happening?
Cheers.
You've attributed max-height:50px; to the div which contains the table. Remove this CSS declaration, and the table won't be overlapped any more.
I think the problem:
1) You maybe remove the max-height where your table is more than 50px.
div.mobileRow{
width:100%;
font-family:Arial;
margin:5px;}
please refer to the picture to get a better visual idea.
I do not have access to Table element because the free edition of the framework I am using "ZK framework" does not have tables but it has DIV .
so think of a Table with some rows and three columns: I used a DIV tag with Left Margin and drew the elements of my left column..
<div id="leftColumn" width= "45%" align="left" style = "margin-top:10px;margin-bottom:10px;margin-right:30px;margin-left:20px;">
I am thinking of using the second column of this table for the spacing between elements on each row and using the third column to put my right hand side elements on it...
so now for the other two DIVs how should I set its properties to look correct?
and actually do you have any better design thoughts?
Thank you.
.divsYouNeedToColumn { display: inline }
in your css should solve your problems.
By the way, the framework restricting tables seems very... stupid.