HTML基础——表格标签

最新推荐文章于 2024-07-15 11:41:19 发布

Ariel_欢

最新推荐文章于 2024-07-15 11:41:19 发布

阅读量9.7k

点赞数 5

分类专栏： B/S # HTML学习

本文链接：https://blog.csdn.net/Ginny97/article/details/112426149

版权

B/S 同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

HTML学习

7 篇文章 2 订阅

订阅专栏

一、什么是表格标签？

其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式。

二、表格标签的格式：

 <table>

        <tr>

            <td>需要显示的内容</td>

        </tr>

 </table>

表格标签中的table标签：代表整个表格，也就是一对table标签就是一个表格。
tr标签：代表整个表格中的一行数据，一对tr标签就是表格中的一行。
td标签：代表表格中一行中的一个单元格，也就是说一对td标签就是一行中的一个单元格。

三、表格定义的元素和属性：

1.<table>元素:

定义表格：例如：

<table border=n  align="alignment" bgcolor="clr">…</table>

<table>元素的属性：border：用于定义表格边框的宽度，border=n，n可以是从0开始的整数，border=0：表示边框没有宽度。（默认border=0）
属性align：用于设置表格的对齐方式，align属性值：left,center或right。
属性：bgcolor:用于执行表格的背景色，它的取值与color属性一样。

【特别注意】

alignment可以是left,center或right。align的属性值没有alignment，但是他是默认值，他默认在靠左对齐，但是和left不一样：

默认align属性：

设置align属性为left：

2.<caption>元素：

用于定义表格的标题，如：

<caption>…</caption>

3.<tr>元素：

在表格中添加一个新行，如：

<tr align="alignment"  valign="alignment">…</tr>

注：

align属性：执行这一行在水平方向上的对齐方式，alignment可以是left、center、right。
valign属性：指定这一行在垂直方向上的对齐方式，alignment可以是top、middle（垂直居中对齐）、bottom。

4.<th>元素：

用于定义表头，如：

<th>…</th>

5.<td>元素：

用于定义单元格。如：

<td>…</td>

四、代码示例：

<html>
    <head>
       <title>表格测试</title>
    </head>
    <body>
        <table border="1" align="center" bgcolor="#fffff0">
            <caption>
                2020年度期末考试成绩单
            </caption>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
            <tr>
                <th>张三</th>
                <th>89</th>
                <th>75</th>
                <th>90</th>
            </tr>
            <tr>
                <th>李四</th>
                <th>80</th>
                <th>70</th>
                <th>90</th>
            </tr>
 
            <tr>
                <th>王五</th>
                <th>89</th>
                <th>75</th>
                <th>90</th>
            </tr>
 
        </table>
    </body>
</html>

效果：

五、注意点：

（1）表格标签的边框属性border，这个属性决定了边框的宽度，默认情况下这个属性的值是0，看不到边框。

（2）表格标签和列表标签一样，它是一个组合标签，所以table/tr/td标签要么一起出现，要么一起不出现，不会单个出现。

（3）属性width和height——给table标签和td标签使用。

width/height属性为什么不用在tr标签中：因为用在td标签里就可以改变整列或者整行的宽度高度变化。

（4）水平对齐和垂直对齐的属性：水平对齐——给table标签和tr标签使用；垂直对齐——给tr标签和td标签使用。

（5）外边距和内边距的属性——table标签使用。