I have search around regarding this whitespace area while coding with html. But I still cannot resolve mine. My problem is that there is always a whitespace after the image of abclogo no matter what i change in the table style. I would like to see the image unseparated from the next line which shows 31 July 2012
<table style="vertical-align: bottom; background-color: rgb(0, 136, 64); width: 100%;">
<tbody>
<tr>
<img style="border: 0; width:>800px;"alt="Logo of abc" src="abclogo.jpg">
</tr>
<tr>
<td style="text-align: right; padding-right: 15px;">31 July 2012</td>
</tr>
</tbody>
</table>
Add cellspacing=0 cellpadding=0 to the table tag. Or use border-collapse: collapse;.
Also add display: block; to the image.
Simply float the image to the left: jsFiddle example.
Related
I am trying to construct an html table with 6 rows. The first row has one line of text which is heading. The second row has 3 columns (set as three td elements). Third row has three values in 3 columns (set as three td elements). 4th row has 3 images in 3 columns (again set as three td elements). This works correctly so far. Now I want to add a fifth row which is a line of text that spans the entire div and has a dotted underline. When I add this element it just draws the the dotted border to 1/3rd of the div only. If I set the width to 100%, the elements above it are dragged to the right of the screen. What am I doing wrong? Here is my complete HTML snippet:
<div id="ToySummary" style="border:solid; border-width:4px; border-color:gray; padding:4px; margin:10px">
<span style="font-family:Calibri; font-size:large; color:midnightblue; text-align:right"><b>FINAL RESULTS SUMMARY</b></span>
<table style="width:100%">
<tr>
<td style="width:33%; font-size:large"><i>Result</i></td>
<td style="width:33%; font-size:large"><i>Lucky Toy</i></td>
<td style="width:33%; font-size:large"><i>Lucky Peoples</i> </td>
</tr>
<tr>
<td style="width:33%; font-size:large">{{overall_result}}</td>
<td style="width:33%; font-size:large">{{lucky}}</td>
<td style="width:33%; font-size:large">{{lucky_peoples}}</td>
</tr>
<tr>
<td><img src={{some_png}} style="width:50px;height:50px;"></td>
<td><img src={{some_other_png}} style="width:50px;height:50px;"></td>
<td><img src={{another_png}} style="width:50px;height:50px;"></td>
</tr>
<tr>
<td style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
</tr>
<tr>
<td>{{toy_score_note}}</td>
</tr>
</table>
</div>
You're trying to make the last two tr's span all the columns? Try this
<tr>
<td colspan="3" style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
</tr>
<tr>
<td colspan="3">{{toy_score_note}}</td>
</tr>
Use colspan attribute inside to span ur dotted border across all columns.
{{animal_test_note}}
<td colspan="3" style=" border-bottom-style:dotted; border-bottom-color: black; border-bottom-width: 2px;"><b><em>{{animal_test_note}}</em></b></td>
this will fix it.
When I understand you right, you try to align a dotted bottom border to your fifth td cell? And every try goes wrong and does not cover the whole bottom line?
I would recommend using CSS classes and ids instead of writing the style part directly into the td tags.
It's messy coding! No offense!
And for your approach:
HTML part:
<td id="dotted">
CSS part:
#dotted {
border-bottom: dotted #000000; /* or any colour you prefer! */
width:100%;
}
By the way: using % and then px in your td tags could cause your problem stick to one.
that should fix it
Is it possible to place a character on a border line displayed in a table?
I am trying to discover a way to re-create musical staff notation for webpages using html rather than inserting images.
I have actually got the staff itself to render fine, 5 horizontal lines divided by vertical bars using this in my css header:
table.musStaff{border-collapse:collapse;}
.trms{border-bottom:2px solid black;}
.tdms{border-left:2px solid black;}
and this where I need to render a musical staff:
<table class="musStaff">
<tr><td> <td> <td> </td></tr>
<tr class="trms"><td> <td> <td> </td></tr>
<tr class="trms"><td> <td class="tdms"> <td class="tdms"> </td></tr>
<tr class="trms"><td> <td class="tdms"> <td class="tdms"> </td></tr>
<tr class="trms"><td> <td class="tdms"> <td class="tdms"> </td></tr>
<tr class="trms"><td> <td class="tdms"> <td class="tdms"> </td></tr>
<tr><td> <td> <td> </td></tr>
</table>
All the are merely included as temporary place holders.
So my problem is I need to be able to place ● chars representing notes on the lines as well as between the lines, rendered by the <tr class="trms"> (border-bottom:2px solid black).
Other than that I think I would be good to go.
Is this what you are trying to achieve?
HTML
<div><span>o</span></div>
CSS
div {
border-right: 1px solid black;
display: inline-block;
font-size: 20px;
line-height: 20px;
height: 1em;
position: relative;
width: 1em;
}
span {
position: absolute;
right: -5px;
}
jsfiddle
You can position anything anywhere you like if you are willing to get into the details and cross-browser issues of css positioning.
For example:
<td style="position:relative; top:-12px">●</td>
http://jsfiddle.net/markm/2ft3ojbn/
If I were working on this, however, I would seriously look at using svg or the canvas instead of html and css — this is the kind of task these tools are made for. In the end it will be much more maintainable and readable. It will also be easier to program. In fact there are some libraries out there already to help — for example:
http://www.vexflow.com
We have a items lined up in a table with no borders or padding. Each first row contains a graphic and the row immediately below is either blank or contains an anchor link to a disclaimer. The link should be closer to the graphic directly above it, but there's still a big gap.
What can I do to format the table so that the graphics and the disclaimer link can be closer?
This is the link to the page I'm working on: http://edenred.jp/for-beneficiaries/for-current-beneficiaries/main-affiliates-list.aspx
Here is a sample of the code: (this was taken from the third row from the bottom)
<tr>
<td>
<span style="font-size: 14px;"><img alt="てんや" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo35-(1).gif.aspx" style="width: 160px; height: 48px;" title="てんや" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とりかく" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo36-(1).gif.aspx" style="width: 160px; height: 48px;" title="とりかく" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とんかつがんこ" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo37-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつがんこ" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とんかつ浜勝" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo38-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつ浜勝" /></span></td>
</tr>
<tr>
<td style="text-align: right; vertical-align: top;">
<span style="font-size:14px;">※1</span></td>
<td style="text-align: right; vertical-align: top;">
<span style="font-size:14px;">※1</span></td>
<td>
</td>
<td>
</td>
</tr>
You have padding set to 10px:
.cpMain td {
vertical-align: top;
padding: 10px; // play with it, change to padding: 0px for the beginning
width: 220px;
}
remove it and it will look good.
Or you can create a css class below the .cpMain td class:
.table-no-padding td {
padding: 0px;
}
and add this class to the list of css classes in your html:
<table class="table-no-padding">
<!-- td content -->
</table>
This is generally caused when you do not define cellspacing=0 and cellpadding=0 while writing table tag. Please check for it.
In your code, I can see that you have applied 10px padding to the class .cpMain td
And 5px right padding is applied to .fruitboxDeliveryForm table.customer td, .simpleForm td
Removing or setting them to 0 these may help you achieve it.
Browsers have a default display for every element. You can uses a tool like firebug for firfox to inspect elements and see what they are for yourself. If you do not explicitly set the style the default will be used.
Using a tool like firebug will also show you where applied styles are coming from
Use CSS to set the style as required. :Set cellpadding and cellspacing in CSS?
In each td of the anchore, set padding-top to 0
padding-top="0px"
eg
<td style="text-align: right; vertical-align: top;padding-top:0px;">
<span style="font-size: 14px;">※8</span></td>
hope it helps :)
I want to make text like this:
Look like this:
texttext: textttt
ttttttttttt: ttt215555
textt: trtrtrt
But when I try, it looks like this:
texttext: textttt
ttttttttttt: ttt215555
textt: trtrtrt
My code that i'm currently using:
<div class="aligncenter" style="width: 700px; height: 1px; border-top: 1px dotted #999999; font-size: 0;">-</div>
Hours: Mon - Sun: 3:00 pm - 6:00 am Phone: 777777777777 Address: asd str. #14
<div class="aligncenter" style="width: 700px; height: 1px; border-top: 1px dotted #999999; font-size: 0;">-</div>
I've solved it like this (wordpress):
http://jsfiddle.net/SEcfh/
<table border="0" align="left">
<tbody>
<tr>
<td style="width: 80px;">Phone:</td>
<td>+999 999 999 999</td>
</tr>
<tr>
<td style="width: 80px;">Phone:</td>
<td>+999 999 999 999</td>
</tr>
<tr>
<td style="width: 80px;">Phone:</td>
<td>+999 999 999 999</td>
</tr>
</tbody>
</table>
You can use white-space: pre or white-space: pre-wrap to preserve spaces in your text. You could also use a layout with <table>s for tabular data, or a definition list <dl> / <dt> / <dd> setup with fixed width terms.
You probably don't want to use white-space: pre because you'll manually have to add the right amount of spaces to your text.
Using spans with a certain width, wrapped in a div with width 2x, you can easily achieve this. See here: http://jsfiddle.net/qaTDN/
This is tabular data, so why not put it in a <table>?
TO break a line or word after certain width you can use this CSS tag:
word-wrap: break-word;
I use Drupal 6 with theme summertime. Also I use FCKeditor. In order to align content I wanted to create a table with invisible borders. First I tried FCKEditor table properties and I gave 0 to border size in order to make borders invisible. But it did not work. I looked up the source and non working code was like below (Why giving border="0" did not work?) :
<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
<tr>
<td>
<h2 class="rtecenter"><strong>Content </strong></h2>
</td>
<td><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
</tr>
</tbody>
</table>
Then I tried:
<table width="468" cellspacing="0" cellpadding="0" style="border: medium hidden ; width: 468px; height: 201px;">
Table borders are now invisible but cell borders are still visible. How can I make it totally invisible. Thanks.
The border attribute should be specified on the cell level, eg <td style="border: 0;">. Of course, this should be made in CSS using:
table td { border: 0; }
But I see that in your case that might be difficult.
It should be done like this:
<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
<tr>
<td style="border: 0">
<h2 class="rtecenter"><strong>Content </strong></h2>
</td>
<td style="border: 0"><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
</tr>
</tbody>
There are probably borders set in the CSS. Drupal core's system.css sets some borders on table headers and body that can be a pain to override.
You can add a custom CSS file to the theme so you avoid editing its CSS directly. Simply add the path to your added .css file in the theme's .info file.
Then try adding:
tbody,
thead,
thead th,
tr.even,
tr.odd {
border: 0;
}
Don't forget to turn off CSS aggregation and clear your cache.
I just happened upon this while searching for something else. This is old, but thought I'd comment anyway. Someone else might find it helpful.
Rather than do a few of the things mentioned above, it would be simpler to just add a specific ID or CLASS name to the table itself, then you could specify settings just for that table in the CSS.
HTML:
<table .... id="exampleclass">
CSS:
#exampleclass tbody,
#exampleclass thead,
#exampleclass th {
border: 0;
}