html关于表格table的相关知识分享【2020网页综合笔记02】

刘金玉编程

发布于 2020-12-03 16:14:25

3470

文章被收录于专栏：编程创造城市编程创造城市

简介 INTRODUCTION学会表格的行合并与列合并很关键！~

相关标签：

table表格

thead可以省略，表示表格表头部分

tbody可以省略，表示表格内容部分

tr表格行

td表格列

th用于表头的列，有加粗效果

colspan列合并，用于列标签

rowspan行合并，用于列标签

设计界面：

源代码分享：


<style>
  table{
      border:1px solid black;
      border-collapse:collapse;
  }
  table tr td,table tr th{
      border:1px solid black;
  }
</style>
列合并的表
<table>
   <thead>
     <tr>
        <th>1</th>
        <th colspan="2">2</th>
     </tr>
   </thead>
   <tbody>
     <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
     </tr>
   </tbody>
</table>

行合并的表<br>
法一：
<table>
   <thead>
     <tr>
        <th>1</th>
        <th>2</th>
        <th>
           <table>
                <tr><td>3</td></tr>
                <tr><td>4</td></tr>
           </table>
        </th>
     </tr>

   </thead>
   <tbody>
     <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
     </tr>
   </tbody>
</table>

法二：
<table>
   <thead>
     <tr>
        <th rowspan="2">1</th>
        <th rowspan="2">2</th>
        <th>
      3
        </th>
     </tr>
     <tr>
        <th>4</th>
     </tr>
   </thead>
   <tbody>
     <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
     </tr>
   </tbody>
</table>

联系作者：刘金玉

长按关注公众号

编程创造城市官网：https://bcczcs.com/

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-12-01，如有侵权请联系 cloudcommunity@tencent.com 删除

int