Web前端技术开发学习笔记(HTML标记语言篇)——第10章在网页中使用表格

最新推荐文章于 2022-05-17 06:00:00 发布

陈Nicole

最新推荐文章于 2022-05-17 06:00:00 发布

阅读量825

点赞数 2

分类专栏：笔记

本文链接：https://blog.csdn.net/chanciecarney/article/details/116395543

版权

笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

第10章在网页中使用表格

10.1 表格概述
10.2 表格标记< table>
10.3 < tr>标记
10.4 < td>和< th>标记
- 使用< th>创建表头
- 单元格的跨行和跨列设置

10.1 表格概述

表哥属于结构性对象，一个表格包括行、列和单元格3个组成部分。其中行是表格中的水平分隔，列是表格中的垂直分隔，单元格是行和列相交所产生的区域。整个表格至少需要3个标记来表示，分别是< table>< tr>和< td>，其中< table>用于声明一个表格对象，< tr>用于声明一行，< td>用于声明一个单元格。

基本语法

<table>
	<tr>
		<td>单元格内容<td>
		...
	</tr>
	<tr>
		<td>单元格内容<td>
		...
	</tr>
	...
</table>

语法说明：表格中所有< tr>标记对都必须放到< table>标记对之间，一个< table>标记对可以包含一个或多个< tr>，而< td>标记对需要放到< tr>标记对之间，一个< tr>标记对可以包含一个或多个< td>标记对，需要注意的是，所有需要在表格中显示的内容包括嵌套表格都是放到单元格< td>标记对之间的。

eg.


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>表格基本结构</title>
    </head>
    
    <body>
        <table>
            <tr>
                <td>第1行第1个单元格</td>
                <td>第1行第2个单元格</td>
            </tr>
            <tr>
                <td>第2行第1个单元格</td>
                <td>第2行第2个单元格</td>
            </tr>
        </table>
    </body>
</html>

效果如下：
在这里插入图片描述
可以看到所形成的表格是没有边框的，接下来我们就看看怎么去设置表格的边框等。

10.2 表格标记< table>

使用< table>可以设置表格的宽度、高度、边距线、对齐方式、背景颜色、背景图片、单元格间距、和边距等表格属性。

10.2.1 设置表格的边框

默认情况下创建的表格没有边框，使用表格的border属性可以设置边框的粗细，显示边框时，还可以通过bordercolor属性设置边框的颜色，默认的边框颜色是黑色。

基本语法

<table border=“边框宽度” bordercolor=“边框颜色”>

语法说明：表格边框宽度值是一个数值，单位为像素，数值越大，边框越粗，当值为0时不显示边框。边框颜色可以使用英文颜色单词表示，也可以使用十六进制的颜色值。
eg.


<!DOCTYPE html PUBLIC "-/ /W3C/ /DTD XHTML 1.0 Transitional/ /EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/ /www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv=“Content-Type” content=“text/html; charset=Utf-8 />
     <title>表格基本结构</title>
    </head>
    
    <body>
        <table border="1" bordercolor="#cc66ff">
            <tr>
                <td>第1行第1个单元格</td>
                <td>第1行第2个单元格</td>
            </tr>
            <tr>
                <td>第2行第1个单元格</td>
                <td>第2行第2个单元格</td>
            </tr>
        </table>
    </body>
</html>

效果如下：
在这里插入图片描述

10.2.2 设置表格的宽度和高度

默认情况下，创建表格的宽度和高度将根据单元格中的内容自动调整。我们制作网页时为了达到某种效果，常常需要修改默认的表格宽度和高度，使用表格的width和height属性可以实现这些要求。

基本语法

<table width=“表格宽度” height=“表格高度”>

语法说明：表格的宽度和高度既可以是像素值，也可以是百分数。需要注意的是，这个百分数是相对于表格的上一级对象的一个值。

10.2.3 设置表格的对齐方式

默认情况下，创建的表格在窗口中居左对齐，使用align属性可以修改表格的对齐方式。

基本语法

<table align=“对齐方式”>

语法说明：对齐方式有3种取值：left，center，right

10.2.4 设置表格的背景颜色

默认情况下，创建的表格的背景颜色是白色，可以通过bgcolor属性修改背景颜色为其他颜色。
基本语法

<table bgcolor=“背景颜色”>

语法说明：背景颜色可以使用英文单词表示，也可以使用十六进制的颜色值。

10.2.5 设置表格的背景图片

有时为了使表格显得更形象生动，我们可以对表格设置背景图片，使用background属性可达到此目的。
基本语法

<table background=“背景图片路径”>

语法说明：背景图片的路径可以使用相对路径也可以使用绝对路径。

10.2.6 设置表格的边距

表格的边距指单元格内容与单元格边框之间的间距。我们可以通过cellpadding改变表格内容与边框的间距。
基本语法

<table cellpadding=“边距值”>

语法说明：边距值的单位是像素，值越大，单元格内容和边框的间距越大。

10.2.7 设置表格的间距

表格的间距指的是单元格之间的间距。当我们设置表格显示边框时，单元格与单元格之间默认情况下存在2个像素大小的间距。有时我们可能不希望单元格之间有间距或希望间距更大点，使用cellspacing属性可以达到这些要求。
基本语法

<table cellspacing=“间距值”>

语法说明：间距值的单位是像素，值越大，单元格之间的间距越大，默认值是2个像素，不希望存在间距时，将值设为0即可。

10.2.8 设置表格的表题

创建表格时，为了概括表格内容或提供有关表格内容的一些有关信息，常常会设置表格的标题。表格的标题使用表格的子标记< caption>来设置。
基本语法

<caption align=“水平对齐方式” valign=“垂直对齐方式”>
	表格标题
</caption>

语法说明：< caption>和< /caption>之间的内容就是表格的标题，表格标题默认情况下在表格上面居中显示，align和valign属性的取值情况如下表：

属性	描述
align	设置水平对齐方式，取值：left/center/right，默认值center
valign	设置垂直对齐方式，取值：top/bottom，默认值取top

10.3 < tr>标记

使用< table>可以总体上设置表格的属性，根据网页布局的需要，还可以单独对表格中的某一行和某一个单元格进行属性设置。
在HTML文档中，< tr>标记就是用来产生和设置表格中的行标记，一个< tr>< /tr>标记对表示表格的一行。
基本语法

<tr height=“行高” align=“水平对齐方式” valign=“垂直对齐方式” bordercolor=“颜色值” bgcolor=“颜色值”>

改标记的各属性和之前的可以设的属性值及概念都差不多，这里就不赘述了。
需要注意的是valign属性在这里有3个属性值，可以取top、middle、bottom，默认值是middle。

10.4 < td>和< th>标记

表格中的内容必须放到单元格中。根据显示内容的格式，单元格可分为一般单元格和标题单元格，标题单元格相对于一般单元格来说，属于特殊单元格。一般出现在第一行或第一列中，主要用于突出某些内容，这些内容也称为表头。
在HTML文档中，一般单元格使用< td>< /td>标记对标识，标题单元格则使用< th>< /th>标记对来标识。一般的单元格的内容默认是居左并以普通格式显示的，而标题单元格的内容则是居中并且加粗显示。

< td>和< th>标记常用属性

属性	描述
align	设置单元格内容相对于单元格水平对齐方式，可取left、center和right3个值，< td>标记的默认值是left，< th>标记的默认值是center
valign	设置单元格内容相对于单元格的垂直对齐方式，可取top、middle和bottom3个值，默认值是middle，即垂直居中对齐
bgcolor	设置单元格的背景颜色
background	设置单元格的背景图像
bordercolor	设置单元格的边框颜色
width	设置单元格的宽度，单位为像素或表格宽度的百分比
height	设置单元格的高度，单位是像素
rowspan	设置单元格的跨行操作
colspan	设置单元格的跨列操作

使用< th>创建表头

在表格的第一行或第一列中使用< th>标记可以创建标题单元格，即表头。
基本语法

<th>表头内容</th>

语法说明：设置的表头内容将加粗并居中显示在单元格中。

单元格的跨行和跨列设置

默认情况下，表格每行的单元格都是一样的，但是很多时候，由于制表的需要或布局页面的需要，需要表格每行的单元格数目不一致，这时的表格就需要执行跨行或跨列操作。跨行和跨列功能可分别通过单元格的rowspan和colspan属性来实现。

基本语法

<td row span=“所跨行数” cools pan=“所跨列数”>

语法说明：rowspan和colspan的属性值是一个具体的数值。

陈Nicole

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Web前端技术开发学习笔记(HTML标记语言篇)——第10章在网页中使用表格

第10章在网页中使用表格10.1 表格概述10.2 表格标记< table>10.2.1 设置表格的边框10.2.2 设置表格的宽度和高度10.2.3 设置表格的对齐方式10.2.4 设置表格的背景颜色10.2.5 设置表格的背景图片10.2.6 设置表格的边距10.2.7 设置表格的间距10.2.8 设置表格的表题10.3 < tr>标记10.4 < td>和< th>标记10.1 表格概述表哥属于结构性对象，一个表格包括行、列和单元格3个组成部分。其
复制链接

扫一扫