HTML设计表格的相关知识

最新推荐文章于 2024-07-26 14:13:22 发布

sumishiwo

最新推荐文章于 2024-07-26 14:13:22 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/sumishiwo/article/details/111085485

版权

HTML设计表格的相关知识

一、基本要点：
（1）表格由<table>...</table>标签来定义
（2）<tr>...</tr>：表示表格的行
（3）<td>...</td>：表示表格的列
（4）<th>...</th>：使用此标签可以将表头粗体居中
（5）<caption>...</caption>:为表格添加标题
（6）border：边框属性，显示带有边框的表格（在table标签中使用）
（7）width：表格宽度（在table标签中使用）
（8）height：表格高度（在table标签中使用）
（9）bgcolor：为整个表格或仅为一个单元格设置背景颜色
（10）background：为整个表设置背景图像或仅为一个单元设置背景图像
（11）bordercolor：设置边框颜色
（12）cellspacing：定义表格单元格之间的空间
（13）cellpadding：表示单元格边框与单元格内容之间的距离
（14）colspan：合并列
（15）rowspan：合并行
（16）style="text-align:center;"：可以使表格中的内容居中（在table标签里使用）
（17）style="margin:0 auto;"：可以使整个表格在页面显示中居中（在table标签里使用）

二、具体代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
</head>
<body> 
<table border = "3px" bordercolor = "0x4C96FF" align = "center">

<tr>
    <td>星期</td>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
    <td>星期六</td>
    <td>星期日</td>
</tr>
<tr>
    <td rowspan="4">上午<br>8:00-12:00</td>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
    <td>星期六</td>
    <td rowspan="8">休息</td>
</tr>
<tr>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
    <td>星期六</td>
</tr>
<tr>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
    <td>星期六</td>
</tr>
<tr>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
    <td>星期六</td>
</tr>
<tr>
    <td rowspan="2">下午<br>14:00-18:00</td>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
    <td>星期六</td>
</tr>
<tr>
    <td>星期一</td>
    <td>星期二</td>
    <td>星期三</td>
    <td>星期四</td>
    <td>星期五</td>
    <td>星期六</td>
</tr>
<tr>
    <td rowspan="2">晚上<br>19:00-21:00</td>
    <td>自习</td>
    <td>自习</td>
    <td>自习</td>
    <td>自习</td>
    <td>自习</td>
    <td>自习</td>
</tr>
<tr>
    <td>自习</td>
    <td>自习</td>
    <td>自习</td>
    <td>自习</td>
    <td>自习</td>
    <td>自习</td>
</tr>
</table>

</body>
</html>