CODEWITHSUNDEEP
htmlcssgrid-layout
user2771150
user2771150

Reputation: 732

Multiple columns - HTML

I have three rows in my html document. The rows look like these:

Name: John Smith
DOB: 01/01/1980
Country: Germany

I would like to divide each row into two columns, so the output of my document look like this:

Name     : John Smith
DOB      : 01/01/1980
Country  : Germany

i.e. the name,dob, and country identifiers in column one of each row and the ":" and result in the column 2 of each row.

This is my code so far:

   <div>
        <h2>
        <br/>Name: KEY_NAME
        <br/>DOB: KEY_DOB
        <br/>Country: KEY_COUNTRY
        </h2>
    </div>

Upvotes: 0

Views: 146

Answers (4)

Jitendra Thakur
Jitendra Thakur

Reputation: 1

No need to add extra td for colon.

<table>
  <tr>
    <td>Name</td>
    <td>: john smith</td>
  </tr>
  <tr>
    <td>DOB</td>
    <td>: 10/10/10</td>
  </tr>
  <tr>
    <td>Country</td>
    <td>: some country</td>
  </tr>
</table>

Upvotes: 0

Sagar Kodte
Sagar Kodte

Reputation: 3815

You can do like this. Hope it helps. Thanks

div p:first-child{
  
   display: inline-block;
    float: left;
    margin: 0 25px;
    width: 50px;
  }

span{
    float: left;
    width: 25px;
}
<div><p>Name </p> <span>:</span> <p>Keyname</p></div>
<div><p>DOB </p> <span>:</span> <p>04/08/93</p></div>
<div><p>Coutry </p> <span>:</span> <p>India</p></div>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7066

Try this :

<div class="body" id="contact">
 <form>
  <table>
 <tr>
 <td>Name  :</td><td>John Smith</td>
 </tr>
  <tr>
 <td>DOB   :</td><td>01/01/1980</td>
</tr>
 <tr>
 <td>Country:</td><td>Germany</td>
</tr>
</table>

enter image description here

Upvotes: 0

brianxautumn
brianxautumn

Reputation: 1162

<table>
  <tr>
    <td>Name</td>
    <td>:</td>
    <td>john smith</td>
  </tr>
  <tr>
    <td>DOB</td>
    <td>:</td>
    <td>10/10/10</td>
  </tr>
  <tr>
    <td>Country</td>
    <td>:</td>
    <td>some country</td>
  </tr>
</table>

Edit: you could do the semicolon as its own column or part of the second. Add extra css to taste.

Upvotes: 0

Related Questions