次の形式の表を単純な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

ここでは、1つの解決策です。それはあなたが持っている以上のことは名前と値ペアのセットであるあなたに

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>