CODEWITHSUNDEEP
javascripthtmlcssyahoo-api
Tai
Tai

Reputation: 1256

Make contents of a table or td tag bold

I'm working with some legacy code and encountered the following issue.

I'm using YAHOO.widget.DataTable( elContainer, aColumnDefs, oDataSource, oConfigs ) structure to modify html elements in a table.

I am running a basic number to US currency conversion on the code in one td of this table. It works for other tables however it fails in this table because all elements are set to bold via the "< \b >" tag which is being pulled into the Yahoo Table structure as the td value.

Ex:

<td>
    <b><s:property value="totalTransactions"/> my text </b>
</td>

For example when the table queries the value at this td it gets "<b><s:property value="totalTransactions"/> my text</b>". When really all I want is my text.

My preffered solution is to remove the b tags.

So the code can run (and doesn't need to differ between different tables and it doesn't need to clean them all first and then attempt to distinguish when it should add bold tags back)

For example I could check if html exists remove it, modify the number, and then add the html back. I think it's cleaner (personal preference perhaps) to modify the table so that it keeps the bold font for all elements in it without adding text inside the td tag.

I looked at: Bold a single line in html table <td>

I tried 

<td style="font-weight:bold"> my text </td>

However it does not become bold.

the bold tag makes the text bold when done like this:

<td>
    <b>my text</b>
</td>

However the b tag interferes with my function. My thought that is due to the yahoo injection:

result =  "$"+myAmount;
el.innerHTML = result;

That the bold style might be overwritten. Are there any solutions? Or is there another reason style doesn't work?

I believe the issue is due to the fact that I'm using a struct: see http://www.mkyong.com/struts2/struts-2-property-tag-example/ .

I am unsure of why traditional styling rules do not apply. Or perhaps I have made an error? The page renders fine just without any bold. I see no logged errors.

Upvotes: 1

Views: 33212

Answers (3)

Angry 84
Angry 84

Reputation: 2995

While the other two answer at the moment have covered the basics, using either strong tag or using a css style (inline or in a style dec).

If the above two still fail, perhaps another means would be using javascript or jquery to enumerate over the table and apply a bold style afterwards either directly to each td cell or table by applying a css or inserting your own b/strong tags.

This may not be an option in your case, but being others will see this. There are still times when this is called for.

I wont post any code as the basics are covered, unless you need a Javascript/jQuery code.

Upvotes: 0

Markus
Markus

Reputation: 4149

I hope I understood the question correctly and your goal is to bold all text in one table. This inline style makes all texts in the cells from the table bold:

<table style="font-weight: 700;">...

or a more readable version:

<table style="font-weight: bold;">...

Upvotes: 1

Емил Цоков
Емил Цоков

Reputation: 692

From what I understood form your question there are 2 possible solutions with inline css.

First one

<html>
<head>
<style>
    table td {
        font-weight:bold;
    }
</style>
</head>
<body>
<table><tr><td>Text inside table cell</td></tr></table>
</body>
</html>

Second one

<table>
    <tr><td style="font-weight:bold">Text inside the table</td></tr>
</table>

one with css declaration:

table td {
            font-weight:bold;
        }

Another solution will be using strong tag to wrap the text. 

<table><tr><td><strong>Text goes here</strong></td></tr></table>

Upvotes: 3

Related Questions