热门服务商品项目web表格设计,行与列的合并,很经典 - 前端学习笔记

首页 > 博客列表 > 热门服务商品项目web表格设计,行与列的合并,很经典

博主信息

博文 65

粉丝 2

访问量 74945

专题推荐

更多>

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>热门服务商品项目web表格设计,行与列的合并,很经典</title>
  </head>
  <body>
    <table
      border="1"
      cellpadding="5"
      cellspacing="0"
      width="800"
      height="500"
      align="center"
    >
      <!-- 表格标题 -->
      <caption style="font-size: 1.5rem; margin-bottom: 10px">
        各城市热门服务商品项目表案例
      </caption>
      <thead>
        <th colspan="2"></th>
        <th>北京</th>
        <th>上海</th>
        <th>深圳</th>
        <th>广州</th>
        <th>成都</th>
      </thead>
      <!-- 主体区域 -->
      <tbody align="center" style="letter-spacing: 5px">
        <tr>
          <!-- 注: 行与列的合并属性必须写到td标签内 -->
          <td rowspan="3">装修</td>
          <td>1</td>
          <td>半包装修</td>
          <td>全包装修</td>
          <td>旧房翻新</td>
          <td>整体装修</td>
          <td>全案装修</td>
        </tr>
        <tr>
          <!-- 第一个单元格已被行方向合并,删除或注释 -->
          <!-- <td></td> -->
          <td>2</td>
          <td>室内装修</td>
          <td>别墅装修</td>
          <td>办公室装修</td>
          <td>写字楼装修</td>
          <td>老房子装修</td>
        </tr>
        <tr>
          <!-- 第一个单元格已被行方向合并,删除或注释 -->
          <!-- <td></td> -->
          <td>3</td>
          <td>卫生间装修</td>
          <td>厨房装修</td>
          <td>客厅装修</td>
          <td>卧室装修</td>
          <td>阳台装修</td>
        </tr>
        <!-- 安装整行为空,跨所有列 -->
        <tr>
          <!-- 单独设置,以覆盖原来的列样式 -->
          <td colspan="7" bgcolor="#F0FFFF">单项安装项目不做</td>
        </tr>
        <!-- 将装修的项目复制三个tr创建维修的项目 -->
        <tr>
          <!-- 注: 行与列的合并属性必须写到td标签内 -->
          <td rowspan="3">维修</td>
          <td>4</td>
          <td>家具维修</td>
          <td>衣柜维修</td>
          <td>橱柜维修</td>
          <td>鞋柜维修</td>
          <td>酒柜维修</td>
        </tr>
        <tr>
          <td>5</td>
          <td>水电维修</td>
          <td>水管维修</td>
          <td>水龙头维修</td>
          <td>马桶维修</td>
          <td>花洒维修</td>
        </tr>
        <tr>
          <td>6</td>
          <td>其它维修</td>
          <td colspan="4">门窗、疏通、家电等维修不做</td>
        </tr>
      </tbody>
    </table>
    <p style="width: 800px; margin: auto; margin-top: 10px; text-align: right">
      <time>2020 年 9 月 30 日</time>
    </p>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：不要重复提交

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

速记Laravel7 Artisan 使用技巧｜附lavarel artisan 命令大全

2021-01-11 15:32:45

效果展示：

HTML