HTML表格

最新推荐文章于 2024-08-31 16:21:12 发布

crystalheting

最新推荐文章于 2024-08-31 16:21:12 发布

阅读量173

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/crystalheting/article/details/103592251

版权

HTML表格

表格标签：

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格的单元
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚
`<col>`	定义表格的列属性

table标签属性：
border：边框；
cellspacing：单元格之间的距离；
cellpadding ：单元格和内容之间距离；
td单元格标签属性：
colspan：跨列合并；
rowspan ：跨行合并；
align 内容水平位置：
可取值left/center/right

示例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML表格</title>
 </head>
 <body>
<table cellspacing="0" cellpadding="10" border="1" bgcolor="yellow">
 <caption>成绩单</caption>
 <th align="center">subject</th>
<th align="center">grade</th>
 <tr align="center">
  <td>math</td>
<td>100</td>
 </tr>
 <tr align="center">
  <td>English</td>
<td>100</td>
 </tr>
 <tr align="center">
  <td>Chinese</td>
<td>100</td>
 </tr>
</table>
 </body>
</html>

效果：
在这里插入图片描述

合并单元格：

合并单元格三个步骤：
1.在最前面的单元格标签中写属性；
2.跨行rowspan、跨列colspan属性；属性值为合并单元格的个数；
3.将被合并的单元格删除；

实例：合并单元格实现简易风车效果
1、新建4*4表格，为方便观察，给每个单元格排好数字顺序。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML表格</title>
 </head>
 <body> 
<table cellpadding="30" cellspacing="0" border="1">
 <tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
 <tr align="center">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
 <tr align="center">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
 <tr align="center">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
 </body>
</html>

在这里插入图片描述
2、横排合并1、2、3

在1单元格里横排合并1、2、3单元格
 <td  colspan="3" bgcolor="yellow">1</td>
 并删掉2和3单元格

3、竖排合并5、9、13

在5单元格里竖排合并5、9、13单元格
<td rowspan="3" bgcolor="#E9967A">5</td>
并删掉9和13单元格

4、横排合并14、15、16

在14单元格里横排合并14、15、16单元格
<td  colspan="3" bgcolor="#9932CC">14</td>
并删掉15和16单元格

5、竖排合并4、8、12

在4单元格里竖排合并4、8、12单元格
 <td rowspan="3" bgcolor="#FFC0CB">4</td>
 并删掉8和12单元格

6、删除边框线，即把border去掉

最后代码：


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML表格</title>
 </head>
 <body> 
<table cellpadding="30" cellspacing="0">
 <tr align="center">
 <td  colspan="3" bgcolor="yellow"></td>
 <td rowspan="3" bgcolor="#FFC0CB"></td>
  </tr>
   <tr align="center">
 <td rowspan="3" bgcolor="#E9967A"></td>
 <td></td>
 <td ></td>
  </tr>
   <tr align="center">
 <td></td>
  </tr>
   <tr align="center">
 <td  colspan="3" bgcolor="#9932CC"></td>
  </tr>
</table>
 </body>
</html>

大风车效果：
在这里插入图片描述