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

【问题标题】：How to display table in following format in simple Html code如何在简单的 Html 代码中以以下格式显示表格
【发布时间】：2017-11-03 12:38:48
【问题描述】：

我想使用简单的 Html 代码以表格格式显示图像内容。我该怎么做？

【问题讨论】：

请分享您的代码
根据您所谈论的图像的哪个方面，这可能是一个非常有趣的问题。标签右侧的点行等。但就目前的问题而言，它太宽泛了，抱歉。
在html中显示图片内容..？准确地说，想要文本识别吗？

标签： css html html-table

【解决方案1】：

你上面有的是一组 name-value 对。

因此，我认为您所拥有的不是表格，而是在语义上最好的标记为 定义列表 (<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>

【讨论】：

【解决方案2】：

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>

【讨论】：

你能解释一下你对<fieldset>的使用吗，尼克？您在字段集中组合在一起的标记中的表单字段集在哪里？
我只是将它用于一个简单的标题，而没有在后台运行。当然，您可以在没有 fieldset 的情况下以另一种方式完成此操作。
我只是将它用于一个简单的标题，而没有在后台出现线条。 是的。以最礼貌和最有同情心的方式，我认为你在滥用<fieldset> 和<legend>。这不是他们的意思，也不是他们的目的。
我很欣赏有多种方法可以达到效果。其中一种方法不是使用<fieldset> 和<legend>。我想非常尊重地解释这一点，因为重要的是你和其他人都能理解它 - 元素的默认浏览器呈现不是该元素的固有属性。您正在部署一个元素，因为它看起来像 什么...但元素看起来不像 任何东西。

【解决方案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>

【讨论】：

【解决方案4】：

这里是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>

【讨论】：