HTML 笔记 表格

1 表格基本语法

tr:table row

th:table head

2 表格属性

2.1 基本属性

  • 表格的基本属性是指表格的行、列和单元格
  • 但并不是每个表格的单元格大小都是统一的,所以需要设计者通过一些属性参数来修改表格的样子,让它们可以更更多样化。
  • 这些属性参数包括行高、宽度等。
    • 1.行高height属性
    • 2.宽度width属性
      1. 边框Border属性
    • 4.单元格大小属性height和width
python 复制代码
<!DOCTYPE html>
<html>
<body>
<table border="1" height="100%" width="100%">
   <tr>
       <th height="50" width="100"> Head 1 </th>
       <th > Head 2 </th>
   </tr>
   <tr>
        <td> row, cell 1 </td>
        <td> row, cell 2 </td>
   </tr>
</table>
</body>
</html>

百分比表示所占浏览器的大小

绝对数字表示像素值大小

2.2 其他属性

  • bgcolor: 定义表格或者单元格的背景颜色
  • background: 定义表格或者单元格的背景图片
python 复制代码
<!DOCTYPE html>
<html>
<body>
<table border="1" height="100%" width="100%" bgcolor='lightgreen'>
   <tr>
       <th height="50" width="100" bgcolor='lightblue'> Head 1 </th>
       <th > Head 2 </th>
   </tr>
   <tr>
        <td bgcolor='red'> row, cell 1 </td>
        <td> row, cell 2 </td>
   </tr>
</table>
</body>
</html>

3 合并单元格

  • 合并同一行的单元格时,要用到 colspan 属性
  • 合并同一排的单元格时,要用到 rowspan 属性
html 复制代码
<!DOCTYPE html>
<html>
<body>
</table>
<table border="3" >
  <tr>
    <td colspan="2">1&2</td>
	<td>3</td>
    <td rowspan="3" >4&<br/>8&<br/>12</td>
  </tr>

  <tr>
    <td>5</td>
    <td>6</td>
	<td>7</td>
  </tr>

  <tr>
    <td>9</td>
    <td>10</td>
	<td>11</td>
  </tr>

  <tr>
    <td>13</td>
    <td>14</td>
	<td>15</td>
	<td>16</td>
  </tr>
</table>

</body>
</html>

4 表格标题

  • <caption>标签是用来给表格添加标题的。
  • 默认情况下将位于表格上方居中的位置,且会根据表格的宽度自行调整位置。
html 复制代码
<!DOCTYPE html>
<html>
<body>
<table border="1" height="100%" width="100%">
   <caption>表格题目</caption>
   <tr>
       <th height="50" width="100"> Head 1 </th>
       <th > Head 2 </th>
   </tr>
   <tr>
        <td> row, cell 1 </td>
        <td> row, cell 2 </td>
   </tr>
</table>
</body>
</html>

5 使用CSS 来定义表格属性

  • 利用CSS来定义表格单元格的height和width
  • 利用CSS来定义表格单元格的border属性
    • 可以按顺序设置如下属性:
      • border-width:
      • border-style: dotted (点状) solid (实线) double (双线) dashed (虚线);
      • border-color
html 复制代码
<!DOCTYPE html>
<html>
<head>
	<style>
		table {
            height: 300px; 
            border: 2px solid lightblue;
        }
        table th {
            height: 32px; 
            width: 100px;
            border: 10px dashed red;
        }
        table td {
            border: 5px double green;
        }
	</style>

</head>

<body>
<table>
   <tr>
       <th> Head 1 </th>
       <th> Head 2 </th>
   </tr>
   <tr>
        <td> row, cell 1 </td>
        <td> row, cell 2 </td>
   </tr>
</table>
</body>
</html>

table是最外圈

table th是head部分(内圈)

table td是 表格正文部分(内圈)

相关推荐
哈基鑫9 小时前
深度学习之图像分类笔记
笔记·深度学习·分类
润 下9 小时前
C语言——深入理解函数声明定义和调用访问
c语言·开发语言·经验分享·笔记·程序人生·其他
He BianGu11 小时前
【笔记】介绍 WPF XAML 中 Binding 的 StringFormat详细功能
笔记·wpf
Rousson12 小时前
硬件学习笔记--78 MCU复位电路简介
笔记·学习
~无忧花开~13 小时前
JavaScript学习笔记(十七):ES6生成器函数详解
开发语言·前端·javascript·笔记·学习·es6·js
optimistic_chen13 小时前
【Java EE进阶 --- SpringBoot】Mybatis操作数据库(基础)
数据库·经验分享·spring boot·笔记·spring·java-ee·mybatis
ASKED_201914 小时前
ChatGPT From Zero To Hero - LLM学习笔记(一)
笔记·学习·chatgpt
GoldenaArcher14 小时前
Postman 学习笔记 III:CLI 自动化测试与 Jenkins CI/CD 实践
笔记·学习·postman
一只小风华~15 小时前
命名视图学习笔记
前端·javascript·vue.js·笔记·学习
(●—●)橘子……15 小时前
记力扣2271.毯子覆盖的最多白色砖块数 练习理解
数据结构·笔记·python·学习·算法·leetcode