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

2020-12-03 16:14:25 浏览数 (1)

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

相关标签:

table表格

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

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

tr表格行

td表格列

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

colspan列合并,用于列标签

rowspan行合并,用于列标签

设计界面:

源代码分享:

代码语言:javascript复制

<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/

0 人点赞