HTML基础-06-表格（表＜table＞ ，行 ＜tr＞，列 ＜tb＞，表头 ＜th＞，跨列colspan，跨行rowspan，单元格边距 cellpadding，单元格间距cellspacing）

文章目录

1. 表< table > ，行 < tr >，列 < tb >

  • 语法

每个 < table > 是一个表格 →
其中每个< tr > 是一列 →
其中每个 < tb > 是一格

  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事(runoob.com)</title> 
</head>
<body>

<h4>一列:</h4>
<table border="1">
<tr>
  <td>刘备</td>
</tr>
</table>

<h4>一行三列:</h4>
<table border="1">
<tr>
  <td>刘备</td>
  <td>关羽</td>
  <td>张飞</td>
</tr>
</table>

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>刘备</td>
  <td>关羽</td>
  <td>张飞</td>
</tr>
<tr>
  <td>孙尚香</td>
  <td>曹月娥</td>
  <td>夏侯涓</td>
</tr>
</table>
  • 输出

在这里插入图片描述

2. 表头 < th >

  • 语法
<th>表头</th>
  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>

<h4>水平标题:</h4>
<table border="1">
<tr>
  <th>姓</th>
  <th>名</th>
  <th>字</th>
</tr>
<tr>
  <td>关</td>
  <td>羽</td>
  <td>云长</td>
</tr>
</table>
  • 输出
    在这里插入图片描述

3. 表名 < caption >

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>

<caption>人员姓名字</caption>
<table border="1">
<tr>
  <th>姓</th>
  <th>名</th>
  <th>字</th>
</tr>
<tr>
  <td>关</td>
  <td>羽</td>
  <td>云长</td>
</tr>
</table>
</body>
</html>
  • 结果输出
    在这里插入图片描述

4. 跨列 colspan

  • 语法
 <th colspan="2">xxxxx</th>

在th里还是在td里都可以

  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>
<table border="1">
<tr>
  <th colspan="2">姓名</th>
  <th>字</th>
</tr>
<tr>
  <td>关</td>
  <td>羽</td>
  <td>云长</td>
</tr>
</table>
</body>
</html>
  • 输出
    在这里插入图片描述

5. 跨行 rowspan

  • 语法
<th  rowspan="2">xxxx</th>
  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>玄德公记事</title> 
</head>
<body>


<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th  rowspan="2">姓名</th>
  <td>关</td>
</tr>
<tr>
  <td>羽</td>
</tr>
<tr>
	<th>表字</th>
	<td>云长</td>
</tr>
</table>

</body>
</html>
  • 输出
    在这里插入图片描述

6. 单元格边距 cellpadding

  • 语法
cellpadding="50"
  • 示例
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>蜀</title>
</head>

<body>

  <h4>有单元格边距:</h4>
  <table border="1" cellpadding="50">
    <tr>
      <td>First</td>
      <td>Row</td>
    </tr>
    <tr>
      <td>Second</td>
      <td>Row</td>
    </tr>
  </table>

</body>

7. 单元格间距 cellspacing

  • 语法
 cellspacing="10"
  • 示例
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

8. 表内标签

  • 语法

直接嵌套就可以了

  • 示例
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>蜀</title> 
</head>
<body>

<table border="1">
<tr>
  <td>
   <p>这是一个段落</p>
   <p>这是另一个段落</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

</body>
</html>
  • 输出

在这里插入图片描述

9. 一个示例

受理员业务统计表
2017-01-02---2017-05-02
受理员受理数自办数直接解答拟办意见返回修改工单类型
同意比例数量比例建议件诉求件咨询件
受理处关羽          
           
           
           
           
           
           
总计20202020202020202020
话务组关羽          
关羽          
关羽          
关羽          
           
           
           
总计20202020202020202020

posted on 2022-03-18 20:16  运维开发玄德公  阅读(94)  评论(0)    收藏  举报  来源

导航