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开发者_如何学JAVA letters.
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 div
s, which have the line-break by default (but it can be disabled by setting display:inline
in the CSS).
<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
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>
Use <span></span>
with the block attribute or <p></p>
<td bgcolor="White" >
<strong>First Name</strong><br />
<small>(on external website)</small>
</td>
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>
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
精彩评论