CODEWITHSUNDEEP
htmlhtml-table
Hitesh S
Hitesh S

Reputation: 580

How to make <td> in new line

I have created dynamic Table with one <tr> and two <td> and want to keep each <td> in new line.

i.e.

<table>
    <tr>
      <td>Name:</td>
      <td>XYZ</td>
    </tr>
  </table>

this would display something like below

1)Name: - this should be in one line

2)XYZ - this should be in new line

Is is possible? how?

Upvotes: 2

Views: 9116

Answers (5)

Erin
Erin

Reputation: 1

If you're not opposed to using CSS, you can use Flexbox (Here's another guide I always use from CSS Tricks) by changing the direction to column (flex-direction:column) for the table row (<tr>).

table tr {
  display: flex;
  flex-direction: column;
}

table tr td:first-child {
  font-weight: 700;
}
<table>
  <tr>
    <td>Name:</td>
    <td>XYZ</td>
  </tr>
</table>

Upvotes: 0

1789040
1789040

Reputation: 579

Make two table rows (<tr>)...

<table>
    <tr>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
    </tr>
</table>

Upvotes: 2

Prasad
Prasad

Reputation: 701

You can't do that by using <td>. A <tr> means table row, and until it gets closed the things you define in it will come in that row.

So, if you need to have a new line you should use a new <tr>

Or use <ul> and <li> wisely to attain your result instead of using tables

Upvotes: 3

Pranay Rana
Pranay Rana

Reputation: 176956

Than make use of TR Not TD

<table>
    <tr>
      <td>Name:</td>
    </tr>
    <tr>
       <td>XYZ</td>
    </tr>
  </table>

Upvotes: 2

Mate
Mate

Reputation: 5284

Add a tr:

<table> 
<tr>
  <td>Name:</td>
</tr>
 <tr>
   <td>XYZ</td>
 </tr>
</table>

Upvotes: 3

Related Questions