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是 表格正文部分(内圈)

相关推荐
大筒木老辈子14 小时前
Linux笔记---协议定制与序列化/反序列化
网络·笔记
草莓熊Lotso14 小时前
【C++】递归与迭代:两种编程范式的对比与实践
c语言·开发语言·c++·经验分享·笔记·其他
我爱挣钱我也要早睡!17 小时前
Java 复习笔记
java·开发语言·笔记
汇能感知1 天前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun1 天前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao1 天前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾1 天前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT1 天前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
ST.J1 天前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin1 天前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全