5

I want to show two lines in <td>. And it is showing, next to each other.

 <td bgcolor="White">
   First Name
   (on external website)
 </td>

I want to be like below. 1st line bold and 2nd line will be small letters.

alt text

Community
  • 1
  • 1
James123
  • 11,184
  • 66
  • 189
  • 343

7 Answers7

13

You could add a <br/> to force a line break and define some CSS classes for the font-styling:

<style>
.name { font-weight: bold; }
.subtext { font-size: smaller; }
</style>

<td bgcolor="White" >
<span class="name">First Name</span>  <br/>
<span class="subtext">(on external website)</span>
</td>

Update: For completeness, I'm also including what others have suggested: instead of using a <br/> element, control the line-break via CSS. This has the advantage, that you can change the behavior (remove the line-break) by simply editing the CSS:

<style>
.name { font-weight: bold; display:block; }
.subtext { font-size: smaller; }
</style>

<td bgcolor="White" >
<span class="name">First Name</span>
<span class="subtext">(on external website)</span>
</td>

Instead of using span elements, you could also use divs, which have the line-break by default (but it can be disabled by setting display:inline in the CSS).

M4N
  • 94,805
  • 45
  • 217
  • 260
  • 5
    If you care about future style changes with CSS, then avoid the "
    " tag, and use CSS like this: **span.name { display: block; }**     – John Fisher Sep 07 '10 at 21:03
2
<td bgcolor="White" >
    <span style="font-weight:bold;">First Name</span>  <br/>
    <span style="font-size:6px;">(on external website)</span>
</td>

like that I suppose

bevacqua
  • 47,502
  • 56
  • 171
  • 285
2

As you want to style the lines differently, you need to put them in separate elements anyway, so if you use block elements they will end up as separate lines:

<td style="background: white;" >
  <div style="font-weight: bold;">First Name</div>
  <div style="font-size: 70%;">(on external website)</div>                                 
</td>
Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • +1 This arrangement would also allow the CSS stying to remove the line separation, if desired. Any solution with "
    " prevents CSS from making the change.     – John Fisher Sep 07 '10 at 21:01
1

Use <span></span> with the block attribute or <p></p>

KeatsKelleher
  • 10,015
  • 4
  • 45
  • 52
0
<td bgcolor="White" >
    <strong>First Name</strong><br />
   <small>(on external website)</small>
  </td>
jasonk
  • 1,580
  • 4
  • 25
  • 33
0

You can put a p tag to indicate a newline like this.

<td> 
    First Name   
   <p>(on external website)</p>
</td>

Or use a br tag like this:

<td> 
    First Name <br />
    (on external website)
</td>
David Moye
  • 701
  • 4
  • 13
0

The simplest solution is to add a <br /> as @M4N writes in his answer. But since it seems, that "First Name" is some sort of title, I would recommend to use the apropriate HTML tag. Also use CSS to style your table:

HTML:

<td class="white">
    <h3>First Name</h3>
    <span class="small">(on external website)</span>
</td>

CSS:

.white {
    background-color: white;
}
.small {
    font-size: .8em;
}

Note: Because <h3> is a block level element, the line break is "inserted" automatically

davehauser
  • 5,844
  • 4
  • 30
  • 45