HTML基础笔记——表格

最新推荐文章于 2024-03-20 20:59:51 发布

Kll .

最新推荐文章于 2024-03-20 20:59:51 发布

阅读量301

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/qq_48894948/article/details/118876989

版权

前端学习笔记专栏收录该内容

18 篇文章 1 订阅

订阅专栏

在Web1.0时代，表格常用于网页布局。但是在Web2.0中，这种方式以及被抛弃了，网页布局都是使用CSS来实现的。但是，表格在实际开发中也用的得非常多，因为使用表格可以更清楚的排列数据

在HTML中，一个表格一般由三个部分组成：表格：table标签，行：tr标签，单元格：td标签

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

tr指的是table row表格行，td指的是table data cell表格单元格

<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束<td>和</td>表示单元格的开始和结束

在表格中，有多少组<tr></tr>就表示有多少行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的学习</title>
        <!--这里使用CSS为表格加上边框-->
        <style type="text/css">
            table,tr,td{border: 1px solid silver;}
        </style>
    </head>
    <body>
       <table>
           <tr>
               <td>HTML</td>
               <td>CSS</td>
           </tr>
           <tr>
               <td>JavaScript</td>
               <td>jQuery</td>
           </tr>
       </table>
    </body>
</html>

默认情况下表格是没有边框的，对于表格的边框、颜色、大小等的设置我们会在CSS中学到。学习HTML时，只需考虑结构即可。

在HTML中，表格一般都会有一个标题，我们可以使用caption来实现

<table>
    <caption>表格标题</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

一个表格只能由一个标题，也就是只能有一个caption标签，在默认情况下，标题位于整个表格的第一行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的学习</title>
        <!--这里使用CSS为表格加上边框-->
        <style type="text/css">
            table,tr,td{border: 1px solid silver;}
        </style>
    </head>
    <body>
       <table>
           <caption>考试成绩表</caption>
           <tr>
               <td>小明</td>
               <td>90</td>
               <td>90</td>
           </tr>
           <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
           </tr>
           <tr>
                <td>小蓝</td>
                <td>90</td>
                <td>90</td>
        </tr>
       </table>
    </body>
</html>

在HTML中，单元格其实有两种，一个是表头单元格，使用th标签；另一个是表行单元格，使用td标签。th指的是table header cell

       <table>
           <caption>表格标题</caption>
           <tr>
               <th>表头单元格1</th>
               <th>表头单元格2</th>
           </tr>
           <tr>
               <td>表行单元格1</td>
               <td>表行单元格2</td>    
           </tr>
           <tr>
               <td>表行单元格1</td>
               <td>表行单元格2</td>
           </tr>
       </table>

表头单元格与表行单元格本质上都是单元格，但是显示上th标签中的内容会以粗体和居中来显示，但是td标签不会

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的学习</title>
        <!--这里使用CSS为表格加上边框-->
        <style type="text/css">
            table,tr,th,td{border: 1px solid silver;}
        </style>
    </head>
    <body>
       <table>
           <caption>表格标题</caption>
           <tr>
               <th>姓名</th>
               <th>成绩</th>
           </tr>
           <tr>
               <td>小明</td>
               <td>90</td>    
           </tr>
           <tr>
                <td>小红</td>
                <td>90</td>    
           </tr>
           <tr>
                <td>小蓝</td>
                <td>90</td>
        </tr>
       </table>
    </body>
</html>

其实一个完整的表格包含：table，caption，tr，th，td。为了更进一步的对表格进行语义化，HTML引入了thead、tbody和tfoot这3个标签

        <table>
           <caption>表格标题</caption>
           <!--表头-->
           <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                </tr>
           </thead>
           <!--表身-->
           <tbody>
               <tr>
                   <td>表行单元格1</td>
                   <td>表行单元格2</td>
               </tr>
           </tbody>
           <!--表脚-->
           <tfoot>
               <tr>
                   <td>标准单元格1</td>
                   <td>标准单元格2</td>
               </tr>
           </tfoot>
       </table>

一般情况下，我们会根据实际需要来使用这些标签，我们不一定会全部都用上这些标签。

对于表格的显示效果来说，thead，tbody，tfoot这三个标签加了跟每没加一样，但是这会让你的代码更具有逻辑性，并且还可以很好的结合CSS来分块控制样式。

合并行：rowspan

在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行指的是是将纵向的N个单元格合并

<td rowspan="跨域行数"></td>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>表格的学习</title>
        <style type="text/css">
            table,tr,td{border: 1px solid silver;}
        </style>
    </head>
    <body>
       <table>
            <tr>
                <td>姓名：</td>
                <td>小明</td>
            </tr>
            <tr>
                <td rowspan="2">喜欢水果：</td>
                <td>苹果</td>
            </tr>
            <tr>
                <td>香蕉</td>
            </tr>
       </table>
    </body>
</html>

合并列：colspan

在HTML中，我们可以使用colspan属性来合并行。所谓的合并列指的是是将横向的N个单元格合并

<td colspan="跨域列数"></td>

其使用方法与合并行大同小异

Kll .

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础笔记——表格

在Web1.0时代，表格常用于网页布局。但是在Web2.0中，这种方式以及被抛弃了，网页布局都是使用CSS来实现的。但是，表格在实际开发中也用的得非常多，因为使用表格可以更清楚的排列数据在HTML中，一个表格一般由三个部分组成：表格：table标签，行：tr标签，单元格：td标签<table> <tr> <td>单元格1</td> <td>单元格2</td> </tr&gt
复制链接

扫一扫