表格标签及其属性

最新推荐文章于 2024-01-11 08:19:33 发布

hmmm_

最新推荐文章于 2024-01-11 08:19:33 发布

阅读量307

点赞数

本文链接：https://blog.csdn.net/hmmm_/article/details/107526438

版权

<table></table>:用于定义一个表格
<tr></tr>:用于定义表格中的一行，必须嵌套在<tr></tr>标签中，在table中包括几对这个标签，就有几行表格。
<td></td>:用于定义表格中的单元格，必须嵌套在<tr></tr>中，一对<tr></tr>中有多少个<td></td>就表示该行中有多少个列或者有多少个单元格。
<th></th>：表头标签，一般位于第一行或者第一列，其文本是加粗居中的。

表结构

 <table>
        <thead> 头部分
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody> 身体部分
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>

表格属性

align:center/left/right

（指整个表格居中而非表格内内容居中）

cellspacing:设置单元格与单元格边框之间的空白距离，默认是像素2

在这里插入图片描述

在表格上写上该书签<table cellspacing="0"></table>

变成
在这里插入图片描述
3.cellpadding:设置单元格内容与单元格边框之间的空白间距，默认像素1
4.border:属性值1或者""//表示没有边框
5.width:设置表格宽度
6:height:设置表格高度
（这些属性也可通过Css进行设定）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
   
    <table align="center"  border="1" cellspacing="0" cellpadding="5" width="500" hight="300">
        <!-- 设置表格名字 -->
        <caption>学生信息</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>专业</th>
                <th>爱好</th>
            </tr>
        <tbody>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>软件工程</td>
                <td>打篮球</td>  
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>软件工程</td>
                <td>打篮球</td>  
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>软件工程</td>
                <td>打篮球</td>  
            </tr>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>软件工程</td>
                <td>打篮球</td>  
            </tr>

        </tbody>
        </thead>
    </table>
</body>

</html>