HTML笔记：表格属性介绍

最新推荐文章于 2024-04-13 18:51:12 发布

三桥君

最新推荐文章于 2024-04-13 18:51:12 发布

阅读量718

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_46218781/article/details/107762919

版权

HTML+CSS自学之路专栏收录该内容

4 篇文章 2 订阅

订阅专栏

摘要：微信搜索【三桥君】
说明：这是关于HTML5的代码笔记

一、理论知识

表格标签
caption：表格标题
table：表格内容
tr：若干行
th：表头的表列
td：表体的表列
语义化标签
thead：表头内容
tbody：表体内容
tfood：表尾内容
注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。

二、参考示例

1、代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模板</title>
    </head>
    <style>
table{
    border-collapse: collapse;
    table-layout: fixed;

}
tr{
    align-items: center;
}
th{
    font-size: 10px;
}
td{
    font-size: 5px;
}
thead{
    background-color: aquamarine;
}
    </style>
    <body>
        <caption>表格标题</caption>
        <table border="1" cellpadding="10" cellspacing="20">
           <thead   > 
                <tr>
                    <th>班级名次</th>
                    <th>科目</th>
                    <th>搜课内容</th>
                    <th>增值服务</th>
                    <th>课时</th>
                    <th>价格</th>
                    <th>试听</th>
                    <th>购买</th>
                </tr>
           </thead>
           <tbody>
               <tr valign="top">
                   <td rowspan="3">真题精解班</td>
                   <td>行测+申论</td>
                   <td>全科历年真题精解</td>
                   <td rowspan="3">课后赠2套模拟卷<br>24小时以内答疑</td>
                   <td>48</td>
                   <td><font color="red">1280元</font></td>
                   <td>图片</td>
                   <td>图片</td>
               </tr>
               <tr align="right"> 
                <!-- <td>真题精解班</td> -->
                <td>行测</td>
                <td>行测历年真题精解</td>
                <!-- <td>课后赠2套模拟卷24小时以内答疑</td> -->
                <td>32</td>
                <td>980元</td>
                <td>图片</td>
                <td>图片</td>
                </tr>
                <tr>
                    <!-- <td>真题精解班</td> -->
                    <td>申论</td>
                    <td>申论历年真题精解</td>
                    <!-- <td>课后赠2套模拟卷24小时以内答疑</td> -->
                    <td>16</td>
                    <td>580元</td>
                    <td>图片</td>
                    <td>图片</td>
                </tr>    
                <tr>
                    <td rowspan="3">高分技巧班</td>
                    <td>行测+申论</td>
                    <td>全科技巧强化</td>
                    <td rowspan="3">入学试卷测评<br>24小时内答疑</td>
                    <td>32</td>
                    <td><font color="red">980元</font></td>
                    <td>图片</td>
                    <td>图片</td>
                </tr>   
                <tr>
                    <!-- <td>高分技巧班</td> -->
                    <td>行测</td>
                    <td>行测速解技巧强化</td>
                    <!-- <td>入学试卷测评24小时内答疑</td> -->
                    <td>18</td>
                    <td>680元</td>
                    <td>图片</td>
                    <td>图片</td>
                </tr>                                    
                <tr>
                    <!-- <td>高分技巧班</td> -->
                    <td>申论</td>
                    <td>申论速解技巧强化</td>
                    <!-- <td>入学试卷测评24小时内答疑</td> -->
                    <td>14</td>
                    <td>580元</td>
                    <td>图片</td>
                    <td>图片</td>
                </tr>                   
           </tbody>
      </table>
    </body>
</html>

2、结果
在这里插入图片描述

三、问答

1、如何使表格框线没有间距，变为实心线？
在table标签中加 border=“1”

<table border="1" cellpadding="10" cellspacing="20">

2、如何定义表格尺寸？
在table标签中加 cellpadding=“10” cellspacing=“20”

<table border="1" cellpadding="10" cellspacing="20">

3、如何改变表格内字体颜色？

<td><font color="red">1280元</font></td>

4、如何合并表格的列？

<td rowspan="3">真题精解班</td>

5、如何合并表格的行？

<td colspan="3">真题精解班</td>

6、如何使表格内文字上下对齐？

<tr valign="top">

7、如何使表格内文字左右对齐？

<tr align="right">

文章整理不易，如有帮助请点赞关注支持，谢谢！微信搜索【三桥君】，回复【关注】有我准备的一份资源大礼包。后续持续更新~~~

三桥君

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML笔记：表格属性介绍

表格标签caption：表格标题table：表格内容tr：若干行th：表头的表列td：表体的表列语义化标签：thead：表头内容tbody：表体内容tfood：表尾内容注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。如何使表格框线没有间距，变为实心线？在table标签中加 border=“1”<table border="1" cellpadding="10" cellspacing="20">如何定义表格尺寸？在tab
复制链接

扫一扫