如何在简单的Html代码中以下列格式显示表格

Question

我想用简单的Html代码以表格格式显示图像内容。我怎样才能做到这一点 ？

Answer 1

fieldset legend { 
 
    text-align: center; 
 
    padding: 0 10px; 
 
} 
 

 
.table-wrap { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.table-wrap > tr > td { 
 
    width: 50%; 
 
} 
 

 
.table-wrap table { 
 
    width: 100%; 
 
} 
 
.table-wrap table .element { 
 
    position: relative; 
 
} 
 
.table-wrap table .element:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 2px; 
 
    width: 100%; 
 
    border-bottom: 1px dotted #000; 
 
    
 
} 
 
.table-wrap table .element .item { 
 
    position: relative; 
 
    background-color: #FFF; 
 
    padding: 2px; 
 
    z-index: 1; 
 
    top: 2px; 
 
} 
 
.table-wrap table .element .price { 
 
    position: absolute; 
 
    right: 0; 
 
    background-color: #FFF; 
 
    padding: 2px; 
 
    z-index: 1; 
 
}

<fieldset> 
 
    <legend>Standard deduction table</legend> 
 
    
 
    <table class="table-wrap"> 
 
    <tr> 
 
     <td> 
 
     <table> 
 
      <tr> 
 
      <td> 
 
       <div class="element"> 
 
       <span class="item">Single (cannot be claimed)</span><span class="price">$ 8,000</span> 
 
       </div> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <div class="element"> 
 
       <span class="item">Head of household</span><span class="price">$ 11,200</span> 
 
       </div> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
     <td> 
 
     <table> 
 
      <tr> 
 
      <td> 
 
       <div class="element"> 
 
       <span class="item">Qualifying window</span><span class="price">$ 16,050</span> 
 
       </div> 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
      <td> 
 
       <div class="element"> 
 
       <span class="item">Married filing seperate returns</span><span class="price">$ 8,000</span> 
 
       </div> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</fieldset>

Answer 2

在这里，在HTML表表极简代码：

这里一些文档：https://www.w3schools.com/html/html_tables.asp

<table> 
    <tr> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th>  
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td>  
    </tr> 
</table> 

Answer 3

这里是一个解决方案。希望它可以帮助你

table { 
 
    width: 45%; 
 
    float: left; 
 
} 
 
table:nth-child(2) { 
 
    margin-right: 5%; 
 
} 
 
table:before, 
 
table:after { 
 
    display: table-cell; 
 
    content: ' '; 
 
} 
 
table:after { 
 
    clear: both; 
 
} 
 
table td, 
 
table p, 
 
table span { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
table p { 
 
    margin: 0px 10px 0px 0px; 
 
    float: left; 
 
} 
 
table span { 
 
    display: block; 
 
    height: 14px; 
 
    border-bottom: 1px dotted #000; 
 
    overflow: hidden; 
 
}

<fieldset> 
 
    <legend align="center">Standard deduction table</legend> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td><p>Single (cannot be claimed as dependent)</p><span></span></td> 
 
     <td>$ 8,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td><p>Single (can be claimed as dependent)</p><span></span></td> 
 
     <td>$ 3,100</td> 
 
     </tr> 
 
     <tr> 
 
     <td><p>Head on household</p><span></span></td> 
 
     <td>$ 11,200</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <td><p>Qualifying widow(er)</p><span></span></td> 
 
     <td>$ 16,050</td> 
 
     </tr> 
 
     <tr> 
 
     <td><p>Married filling jointly</p><span></span></td> 
 
     <td>$ 16,050</td> 
 
     </tr> 
 
     <tr> 
 
     <td><p>Married filling seperate returns</p><span></span></td> 
 
     <td>$ 8,000</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</fieldset>

Answer 4

你有什么上面是一套名值对。

结果，而不是一个表，我觉得你有什么是语义上的定义列表（<dl>）的最佳标记的 - 一系列伴随着相关数据定义数据标题（<dt>）（<dd> ）。

工作实例：

.standard-deduction-table { 
 
width: 790px; 
 
text-align: center; 
 
} 
 

 
h2 { 
 
position: relative; 
 
display: inline-block; 
 
z-index: 12; 
 
height: 21px; 
 
padding: 0 6px; 
 
line-height: 21px; 
 
font-size: 14px; 
 
font-family: arial, helvetica, sans-serif; 
 
background-color: rgb(255, 255, 255); 
 
} 
 

 
dl { 
 
display: block; 
 
position: relative; 
 
top: -37px; 
 
width: 790px; 
 
height: 64px; 
 
padding: 24px 6px 12px; 
 
border: 1px solid rgb(0,0,0); 
 
} 
 

 
dl::after { 
 
content: ''; 
 
display: block; 
 
clear: both; 
 
} 
 

 
dt { 
 
position: relative; 
 
float: left; 
 
clear: both; 
 
z-index: 12; 
 
height: 20px; 
 
margin: 0; 
 
padding: 0 2px 0 0; 
 
line-height: 20px; 
 
background-color: rgb(255, 255, 255); 
 
} 
 

 
dd { 
 
display: block; 
 
position: relative; 
 
left: 0; 
 
text-align: right; 
 
width: 370px; 
 
height: 20px; 
 
margin: 0; 
 
padding: 0; 
 
line-height: 20px; 
 
} 
 

 
dd::after { 
 
content: ''; 
 
position: relative; 
 
display: block; 
 
bottom: 5px; 
 
margin-right: 64px; 
 
border-bottom: dotted 1px rgb(0, 0, 0); 
 
} 
 

 
dt:nth-of-type(n+4) { 
 
position: relative; 
 
top: -60px; 
 
left: 420px; 
 
} 
 

 
dd:nth-of-type(n+4) { 
 
position: relative; 
 
top: -60px; 
 
left: 420px; 
 
}

<div class="standard-deduction-table"> 
 
<h2>Standard deduction table</h2> 
 

 
<dl> 
 
<dt>Single (cannot be claimed as a dependent)</dt> 
 
<dd>&dollar;8,000</dd> 
 
<dt>Single (can be claimed as a dependent)</dt> 
 
<dd>&dollar;3,100</dd> 
 
<dt>Head of Household</dt> 
 
<dd>&dollar;11,200</dd> 
 
<dt>Qualifying widower</dt> 
 
<dd>&dollar;16,050</dd> 
 
<dt>Married filing jointly</dt> 
 
<dd>&dollar;16,050</dd> 
 
<dt>Married filing separate returns</dt> 
 
<dd>&dollar;8000</dd> 
 
</dl> 
 

 
</div>