表格标签
今天主要来讲解一下前端开发中的表格标签
一、基本语法
<table>
<caption>表格标题</caption>
<tr>
<th>表头单元格内容</th>
...
</tr>
<tr>
<td>单元格内容</td>
...
</tr>
...
</table>
二、语法说明
<table>...</table>标签组表示表格的开始和结束，其他表格标签必须放在<table>...</table>之间。<caption>...<caption>标签组表示整个表格的标题，其位置必须紧跟<table>标签之下，这里要注意一个表格只能有一组<caption>标签。<tr>...</tr>标签组表示单元格的行，表格中有多少行就有多少对<tr>标签。<th>...</th>表示表头单元格，内容默认加粗并居中显示。
表格属性设置
-
单元格间距属性：
基本语法<table cellspacing="数值">...</table>
单元格间距属性值的单位是px，默认值是2。 -
表格背景属性：包括背景色属性和背景图片属性两种。
基本语法：<table bgcolor="颜色值">...</table>这里的颜色值可以是6位十六进制数也可以是颜色的英文单词。
<table background="背景图片 URL">...</table>
如果是想对某个单元格设置背景，则直接在相应的单个表格标签中添加，如：<td bgcolor="颜色值">...</td> -
单元格合并属性
跨列属性（横向合并）
基本语法：<colspan="数值">，数值要大于等于2。
跨行属性（纵向合并）
基本语法：<rowspan="数值">，数值同样要大于等于2。 -
表格结构标签
定义表格的头部<thead>...</thead>
定义表格的主体<tbody>...</tbody> -
其他常用属性
| 属性名 | 说明 |
|---|---|
| border | 设置表格边框线宽度，默认值为0，即不显示边框线 |
| bordecolor | 设置表格边框线颜色 |
| width | 设置表格的宽度 |
| height | 设置表格的高度 |
| align/valign | 设置表格水平/垂直对齐方式 |
| cellpading | 单元格边沿与其内容之间的空白，默认为1像素 |
三、举例说明
大家根据下面的案例进行对比理解
<!DOCTYPE>
<html>
<head>
<title>课程信息表</title>
</head>
<body>
<table border="2" bordercolor="#003366" cellspacing="5" bgcolor="#CCFFCC">
<caption>2021年上学期课程信息</caption>
<tr>
<th width="60">序号</th>
<th>课程名称</th>
<th>任课教师</th>
<th>起止周次</th>
<th>上课周</th>
</tr>
<tr>
<td align="center">1</td>
<td>前端</td>
<td>李老师</td>
<td>1-9</td>
<td>
<table width="200" border="1">
<tr>
<td>1-6周：2，4</td>
</tr>
<tr>
<td>7-9周:2,5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="center">2</td>
<td>体育</td>
<td>张老师</td>
<td>1-10</td>
<td>2，5</td>
</tr>
<tr>
<td>3</td>
<td>平面设计</td>
<td>刘老师</td>
<td rowspan="2">4-14</td>
<td>1，3</td>
</tr>
<tr>
<td>4</td>
<td>近代史</td>
<td>王老师</td>
<td>2,6</td>
</table>
</body>
</html>
这是上述代码执行效果图
983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
