减少 HTML 代码的长度答案

【问题标题】：Reducing the length of HTML code减少 HTML 代码的长度
【发布时间】：2017-05-23 09:41:06
【问题描述】：

我有以下 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 来说听起来太微不足道，请原谅我 - 因为我是该语言的新手。

干杯！

【问题讨论】：

您想研究像 PHP 这样的服务器端语言。使用 PHP，您可以创建模板并通过调用包含它们，因此，没有重复和更小的代码库:) php.net
这就是模板语言的意义所在。有很多可供选择。我喜欢模板工具包。
如果你添加一个 css 类并使用它
您在哪里学会使用这些align 属性？它们在上个世纪被宣布弃用，现在不应该教给新的 HTML 学习者。

标签： javascript html css frontend

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

【讨论】：

【解决方案2】：

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

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

【讨论】：