多列 - HTML

Question

我的 html 文档中有三行。这些行如下所示：

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

我想将每一行分成两列，因此我的文档输出如下所示：

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

即每行第一列中的 name,dob, and country 标识符和每行第二列中的 ":" and result。

到目前为止，这是我的代码：

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

Answer 1

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

编辑：您可以将分号作为单独的列或第二列的一部分。添加额外的 css 来调味。

Answer 2

试试这个：

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

你可以这样做。希望能帮助到你。谢谢

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 4

无需为冒号添加额外的 td。

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

多列 - HTML

Multiple columns - HTML

html

css

grid-layout