CODEWITHSUNDEEP
asp.nethtmlcss
James123
James123

Reputation: 11652

How make 2 lines in <td>

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

Upvotes: 5

Views: 30525

Answers (7)

M4N
M4N

Reputation: 96571

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).

Upvotes: 13

davehauser
davehauser

Reputation: 5954

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

Upvotes: 0

Guffa
Guffa

Reputation: 700432

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>

Upvotes: 2

bevacqua
bevacqua

Reputation: 48496

<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

Upvotes: 2

KeatsKelleher
KeatsKelleher

Reputation: 10191

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

Upvotes: 1

David Moye
David Moye

Reputation: 800

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>

Upvotes: 0

jasonk
jasonk

Reputation: 1570

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

Upvotes: 0

Related Questions