Question

我有以下HTML代码 -

<h4>Japan:</h4>
     <table width=100>
        <col width="30%">
        <col width="10%">
        <tr>
           <td>Value1:</td>
           <td align="right">200</td>
        </tr>
        <tr>
           <td>Value2:</td>
           <td align="right">500</td>
        </tr>
        <tr>
           <td>Value3:</td>
           <td align="right">33</td>
        </tr>
        <tr>
           <td>Value4:</td>
           <td align="right">11</td>
        </tr>
        <tr>
           <td>Value5:</td>
           <td align="right">123</td>
        </tr>
     </table>
     <h4>China:</h4>
              <table width=100>
        <col width="30%">
        <col width="10%">
        <tr>
           <td>Value1:</td>
           <td align="right">600</td>
        </tr>
        <tr>
           <td>Value2:</td>
           <td align="right">1100</td>
        </tr>
        <tr>
           <td>Value3:</td>
           <td align="right">444</td>
        </tr>
        <tr>
           <td>Value4:</td>
           <td align="right">1112</td>
        </tr>
        <tr>
           <td>Value5:</td>
           <td align="right">123321</td>
        </tr>
     </table>

上面的代码工作正常，并生成一个HTML页面。但问题是重复一些标签，如 -

<table width=100>
            <col width="30%">
            <col width="10%">

和

align="right"

我想知道是否有通过将这些重复行添加为类或模板来减少代码。

代码只包含HTML文件，没有CSS或JS文件（我可以考虑添加这些文件，如果它有助于解决我的问题）。

请原谅我，如果这个问题听起来对于HTML来说太微不足道了 - 因为我是这个语言的新手。

干杯！

Answer 1

是的，您可以（并且您应该）使用一些CSS来执行此操作。将HTML和CSS分开是一种很好的做法（也就是说，不是内联的写样式）：

table { 
     width : 100% 
}

col:nth-child(1){ 
        width : 30% 
}

col:nth-child(2){ 
        width : 10% 
}

td:nth-child(2){ 
       text-align : right 
}

<h4>Japan:</h4>
     <table>
        <col>
        <col>
        <tr>
           <td>Value1:</td>
           <td>200</td>
        </tr>
        <tr>
           <td>Value2:</td>
           <td>500</td>
        </tr>
        <tr>
           <td>Value3:</td>
           <td>33</td>
        </tr>
        <tr>
           <td>Value4:</td>
           <td>11</td>
        </tr>
        <tr>
           <td>Value5:</td>
           <td>123</td>
        </tr>
     </table>
     <h4>China:</h4>
              <table>
        <col>
        <col>
        <tr>
           <td>Value1:</td>
           <td>600</td>
        </tr>
        <tr>
           <td>Value2:</td>
           <td>1100</td>
        </tr>
        <tr>
           <td>Value3:</td>
           <td>444</td>
        </tr>
        <tr>
           <td>Value4:</td>
           <td>1112</td>
        </tr>
        <tr>
           <td>Value5:</td>
           <td>123321</td>
        </tr>
     </table>

Answer 2

是。您可以通过添加css文件来减少代码。或在头标记中使用此代码：

<style>
table {
    width:100%;
}
td { 
    text-align:right;
}
</style>

减少HTML代码的长度

2 个答案: