Mehrere Spalten - HTML

Question

Ich habe drei Zeilen in meinem HTML-Dokument. Die Zeilen aussehen wie diese:

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

Ich möchte jede Zeile in zwei Spalten zu unterteilen, so dass der Ausgang meines Dokuments wie folgt aussehen:

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

dh die name,dob, and country Identifikatoren in der ersten Spalte von jedem Reihe und die ":" and result in der Spalte 2 jeder Reihe.

Dies ist mein Code so weit:

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

Answer 1

Sie können wie folgt tun. Ich hoffe es hilft. Dank

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>

Answer 2

<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: Sie könnten das Semikolon als eigene Spalte oder einen Teil des zweiten tun. Fügen Sie extra CSS nach Geschmack hinzu.

Answer 3

Versuchen Sie folgendes:

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

Answer 4

Keine Notwendigkeit, zusätzliche td hinzufügen für Doppelpunkt.

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