HTML之表格标签

最新推荐文章于 2024-11-13 17:45:44 发布

我谢谢

最新推荐文章于 2024-11-13 17:45:44 发布

阅读量815

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/X18160013/article/details/121641098

版权

这篇博客介绍了HTML表格的基本结构和使用，包括表格标签如<table>, <tr>, <td>, <th>等，以及如何通过align、border等属性设置样式。还讲述了表格的行列合并方法，并给出了制作课程表的示例。最后提供了使用表格的注意事项和最佳实践。" 41343865,1355738,高通平台LCD模块点亮详解,"['嵌入式开发', '硬件驱动', 'Linux内核', 'LCD驱动', '设备树']

摘要由CSDN通过智能技术生成

1.什么是表格?

表格最重要的目的是显示表格类数据，比如就业薪资表，财务报表，学生信息表，座次表等。其实表格在网页开发中使用非常的广泛，它跟前面所学的列表一样，都是由一些固定的标签搭配起来使用，只是它的标签稍多了一些。

基本结构标签:

<table> ：定义表格

<tr> ：定义表格的行

<td> ：定义表格中的单元格

<th> ：定义表格中的表头单元格

<thead> ：定义表格中的表头内容

<tbody> ：定义表格中的主体内容

<tfoot> ：定义表格中的表注内容（脚注）

<caption>：定义表格标题

2.怎么使用表格?

基本语法：
<table>
   <tr>
       <td></td>
   </tr>
</table>

注意：表头单元格标签<th></th>(包裹在tr中)，文字会加粗居中显示

表格相关属性：
1、align="center"
2、border="1"/""边框
3、cellpadding = "1" 单元格边和内容之间的距离
4、cellspacing="2"单元格与单元格之间的距离
5、width="100" height="500"表格的宽度和高度

3.表格合并行列

跨行与跨列的属性在td标签中进行：

colspan : 跨列合并（横向），一个单元格占一行内多个单元格的位置跨n列，就把下面的n-1个td删除

rowspan : 跨行合并（纵向），一个单元格占一列内多个单元格的位置跨n行，在把它下面n-1 个 tr的td删除

4.制作课程表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>起名困难户标题</title>
</head>
<body>

    <table border="1" width="600" align="center" cellpadding="2" cellspacing="2" bordercolor="#0000FF">
        <caption>课程表</caption>
        <thead align="center">
            <tr>
                <td>项目</td>
                <td colspan="5">上课</td>
                <td colspan="2">休息</td>
            </tr>
            <tr>
                <td>星期</td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
                <td>星期六</td>
                <td>星期七</td>
            </tr>
            <tr>
                <td rowspan="4">上午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>英语</td>
                <td>物理</td>
                <td>计算机</td>
                <td rowspan="4">休息</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">下午</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>物理</td>
                <td>计算机</td>
                <td>英语</td>
                <td rowspan="2">休息</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>数学</td>
                <td>地理</td>
                <td>历史</td>
                <td>化学</td>
                <td>计算机</td>

            </tr>
        </thead>

    </table>
</body>

</html>