原生html表格

大得369

已于 2023-04-10 07:02:40 修改

阅读量962

点赞数 2

分类专栏： html 文章标签： servlet java 前端

于 2022-07-19 11:09:45 首次发布

本文链接：https://blog.csdn.net/qq_34631220/article/details/125867986

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<div style="margin-top:10px;">
          <table align="center" style="width: 100%;">
              <caption>票据</caption>
              <tr>
                  <th align="center" valign="middle">收费项目</th>
                  <th align="center" valign="middle">计费周期</th>
                  <th align="center" valign="middle">面积</th>
                  <th align="center" valign="middle">数量</th>
                  <th align="center" valign="middle">单价</th>
                  <th align="center" valign="middle">违约金</th>
                  <th align="center" valign="middle">金额</th>
              </tr>
              <tr>
                  <td align="center" valign="middle">张三</td>
                  <td align="center" valign="middle">89</td>
                  <td align="center" valign="middle">92</td>
                  <td align="center" valign="middle">87</td>
                  <td align="center" valign="middle">87</td>
                  <td align="center" valign="middle">87</td>
                  <td align="center" valign="middle">87</td>
              </tr>
              <tr>
                  <th rowspan="2" align="center" valign="middle">02125</th>
                  <td colspan="3" align="center" valign="middle">您好，欢迎</td>
              </tr>
              <tr>
                  <td colspan="3" align="center" valign="middle">658</td>
              </tr>
          </table>
        </div>

css

table { border-collapse: collapse;}
table,table tr th, table tr td { border:1px solid #c6c6c6;}

第二种写法

 <div style="margin-top:10px;line-height: 30px;">
          <table align="center" style="width: 100%;border-collapse: collapse;">
              <caption>票据</caption>
              <tr>
                  <th style="border:1px solid #c6c6c6;" align="center" valign="middle">收费项目</th>
                  <th style="border:1px solid #c6c6c6;" align="center" valign="middle">计费周期</th>
                  <th style="border:1px solid #c6c6c6;" class="ddd" align="center" valign="middle">面积</th>
                  <th style="border:1px solid #c6c6c6;" align="center" valign="middle">数量</th>
                  <th style="border:1px solid #c6c6c6;" align="center" valign="middle">单价</th>
                  <th style="border:1px solid #c6c6c6;" align="center" valign="middle">违约金</th>
                  <th style="border:1px solid #c6c6c6;" align="center" valign="middle">金额</th>
              </tr>
              <tr>
                  <td style="border:1px solid #c6c6c6;" align="center" valign="middle">张三</td>
                  <td style="border:1px solid #c6c6c6;" align="center" valign="middle">89</td>
                  <td style="border:1px solid #c6c6c6;" align="center" valign="middle">92</td>
                  <td style="border:1px solid #c6c6c6;" align="center" valign="middle">87</td>
                  <td style="border:1px solid #c6c6c6;" align="center" valign="middle">87</td>
                  <td style="border:1px solid #c6c6c6;" align="center" valign="middle">87</td>
                  <td style="border:1px solid #c6c6c6;" align="center" valign="middle">87</td>
              </tr>
              <tr>
                  <th style="border:1px solid #c6c6c6;" rowspan="2" align="center" valign="middle">02125</th>
                  <td style="border:1px solid #c6c6c6;" colspan="7" align="center" valign="middle">您好，欢迎</td>
              </tr>
              <tr>
                  <td style="border:1px solid #c6c6c6;" colspan="7" align="center" valign="middle">658</td>
              </tr>
          </table>
        </div>