开发者

How make 2 lines in <td>

开发者 https://www.devze.com 2023-01-15 09:02 出处:网络
I want to show two lines in <td>. And it is showing, next to each other. <td bgcolor="White">

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.

How make 2 lines in <td>


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


<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

0

精彩评论

暂无评论...
验证码 换一张
取 消