几个html+css常用表格_html内嵌css样式做表格-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48271592/article/details/118695169

本文介绍了四个常用的纯HTML+CSS表格设计，包括普通斑马纹表格、右侧带图片的表格、横向无边框表格以及Vue里的竖向表格。每个表格都提供了效果图、HTML和CSS代码示例，便于直接应用或参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

几个常用的纯html+css表格：

有时候ui框架提供的表格并不能完全满足我们的需求，这时候就需要手写表格了。我把最近用的到几个表格存一下，方便以后CV。

1.普通斑马纹表格（公司信息、个人信息表）：

例如：

1、效果图

2、 HTML代码

 <table class="printTB detailTb gua-detail-table" cellspacing="0" cellpadding="0">
            <tbody>
              <tr class="titleTd">
                <td colspan="6">保函基本信息</td>
              </tr>
              <tr class="dataTr">
                <td class="labelTd">
                  <label for="entName">机构名称</label>
                </td>
                <td colspan="3">
                  <div class="dispEntNameContainer inline-block">
                    <div class="dispEntNameContent eid_130">
                      <a href="javascript:;" id="entName" name="entName">***有限公司</a>
                      <div
                        class="dispEntNameDetailsContainer noPrint"
                        style="bottom: 14px; left: 42px; display: none;"
                      >
                        <div class="dispEntNameDetailsContent">
                          <span class="inline-block">
                            <a
                              class="dispLinks dispEntNameLink entDetail"
                              href="/Users/Detail/130"
                              id="entDetail_130"
                            >机构信息</a>
                          </span>
                        </div>
                        <div class="icon dispEntNameDetailsArrow" style="left: 22px;"></div>
                      </div>
                    </div>
                  </div>
                </td>
                <td rowspan="7" colspan="2" class="textCenter">
                  <span>扫描查询真伪</span>
                  <br />
                  <img
                    id="guaQRCode"
                    class="center-block"
                    src="../../assets/img/test.png"
                     width="91" height="91" alt/>
                  <div>
                    <span>保函编号：2021071291234567891234567894</span>
                  </div>
                  <img src="../../assets/img/test2.png" width="343" height="62" alt />
                </td>
              </tr>
              <tr class="dataTr oddTr">
                <td class="labelTd">
                  <label for="guaStatusText">状态</label>
                </td>
                <td>
                  <span class="gua-status-text gua-status-approved">已备案</span>
                </td>
                <td class="labelTd">
                  <label for="prjCity">项目所在地</label>
                </td>
                <td>荥阳市</td>
              </tr>
              <tr class="dataTr">
                <td class="labelTd">
                  <label for="guaAmount">担保额度（万元）</label>
                </td>
                <td>38.072500</td>
                <td class="labelTd">
                  <label for="guaTypeText">担保类型</label>
                </td>
                <td>建筑务工人员工资支付保证金担保</td>
              </tr>
              <tr class="dataTr oddTr">
                <td class="labelTd">
                  <label for="guaStartDate">保函开始日期</label>
                </td>
                <td>2019/7/4</td>
                <td class="labelTd">
                  <label for="guaEndDate">保函结束日期</label>
                </td>
                <td>2021/7/3</td>
              </tr