零基础10天学会网页制作第二天（下）之表格table标签

们继续往下讲述，关于a标签的跳转，我们用到的是href属性，href里面对应的就是我们需要跳转的地址，可以是本地文件的跳转，也可以是网络地址的跳转，这个很简单了，就不过多做赘述了。

大家有没有发现，在上述的例子中，我们点击a标签后，跳转的页面都是在当前窗口打开的，在实际的开发中，如果说在新的窗口打开呢？那么我就需要a标签的另一个属性“target”，target这个属性,可以使得我们选择在当前页面或者新窗口进行打开，默认不写或者target=“_self”，是当前窗口，target=“_blank”，是在新的窗口打开。

我们举个例子：

目录结构

目前，零基础这个文件夹里，有两个文件，“a标签.html”这个文件里的代码如下：

代码展示

跳转地址为同目录的“远程图片加载.html”文件，target属性为_blank，在新的窗口打开，我们看下效果：

点击

点击后，打开新的窗口进行展示：

新窗口打开

上边的例子，大家可以实际操作一下。

之前说过，a标签，不仅仅可以是文字，也可以是图片，比如我们给上边的“远程图片加载.html”这个文件里的图片，加上超链接，让它跳转到百度，代码如下：

代码

效果如下：

效果

点击图片后，跳转到了百度

跳转到百度

简单吧，所以啊，老铁们，网页制作啊，没什么好难的，轻轻松松都能学会。

3、表格标签，table，tr，td

表格，对于我们来说，司空见惯，课程表啊，人员信息表啊，这些Excel我们经常用，那么如何在网页上来表示表格呢？这就不得不提到table系列标签。

table表示一个表格，每一行由tr来表示，每一列由td来表示，举个很简单的例子，1行1列，代码如下：

代码

大家可以看到，代码这里，为了大家能够直观，很清晰地看到，我自己做了格式化，这里大家作为了一个了解就可以了，因为从第三天开始，我们就要鸟枪换炮，采用IDE进行开发，那简直就是如虎添翼，开发起来，嗖嗖的，我们拭目以待。

好，我们看下代码实现的效果，右键点击打开方式为浏览器：

what？什么鬼？这就是表格，开玩笑的吧，没开玩笑老铁，这确确实实，就是上述代码运行的效果，为什么和我们平常的表格不一样，那是因为没有添加属性啊，来，上才艺，加上边框，border，我们再来看下效果：

更改代码如下：

上面的代码，我们加上了表格的边框，宽度为1，单位默认是像素，可带可不带，运行效果如下：

有的朋友看到上面的效果，可能就有疑问了，为什么会有两个边框呢？这是由于table标签自带的内外边距所导致呢，如何去掉呢，很简单，使用

cellpadding和cellspacing属性就可以搞定，代码如下：

效果如下：

这里对两个属性，做一个解释，cellpadding,指的是单元格内容与其边框之间的空白，我们来看个对比：

不设置cellpadding

代码：

效果：

设置cellpadding为10：

代码：

效果：

是不是很清晰地看到了，表格中的内容距离边框明显远了，这就是cellpadding的作用。

我们再来看cellspacing，它指的是单元格之间的距离，我们看下对比：

不设置cellspacing：

代码：

效果：

设置cellspacing为10：

代码：

效果：

cellpadding和cellspacing属性，大家不要搞混淆了，一个是内容到边框的距离，一个单元格之间的距离。

来吧，实战练习一下，下面这个表格呢，是我用画图工具画的，对得不是很齐，将就着看哈，对于下面的表格，我们该如何实现呢？

首先呢，先分析，这个是很有必要的，即便以后，我们学有所成，做任何东西之前，也尽量要先分析，后写代码，通过上图，我们可以看到，有有5行3列，那么对应的tr，也就是行，就会有5个，每个tr里，有4列，也就是有4个td，ok，我们直接上代码：

代码有点多，其实都是重复的，莫害怕，不截图了，直接代码块，大家尽量自己写，千万别复制啊：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格练习</title>
</head>
<body>
 
<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<td>姓名</td>
		<td>年龄</td>
		<td>性别</td>
		<td>籍贯</td>
	</tr>
	<tr>
		<td>小赵</td>
		<td>12</td>
		<td>男</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>小王</td>
		<td>23</td>
		<td>女</td>
		<td>上海</td>
	</tr>
	<tr>
		<td>老李</td>
		<td>36</td>
		<td>男</td>
		<td>郑州</td>
	</tr>
	<tr>
		<td>老王</td>
		<td>68</td>
		<td>男</td>
		<td>广州</td>
	</tr>
</table>
 
</body>
</html>

效果如下图：

虽然效果出来了，但是，是不是感觉很小啊，怎么解决？老铁们，前边我们是不是讲过图片是如何控制大小的，通过宽width和高height这两个属性是吧，同样的，这两个属性，也可以用于表格，我们不妨给当前表格设置，宽为500，高为300。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格练习</title>
</head>
<body>
 
<table border="1" cellpadding="0" cellspacing="0" width="500" height="300">
	<tr>
		<td>姓名</td>
		<td>年龄</td>
		<td>性别</td>
		<td>籍贯</td>
	</tr>
	<tr>
		<td>小赵</td>
		<td>12</td>
		<td>男</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>小王</td>
		<td>23</td>
		<td>女</td>
		<td>上海</td>
	</tr>
	<tr>
		<td>老李</td>
		<td>36</td>
		<td>男</td>
		<td>郑州</td>
	</tr>
	<tr>
		<td>老王</td>
		<td>68</td>
		<td>男</td>
		<td>广州</td>
	</tr>
</table>
 
</body>
</html>

效果如下：

效果明显好转了是吧，但是，问题来了，文字没有居中，怎么搞？如果我们以后学了css样式后，其实特别简单，这里就先不扩展css的东西，还是先研究html，一点一点来，按部就班。文字居中，就需要用到align属性，它有三个值，left，center，right，很明显就是，左，中，右；来，我们设置居中：

这里呢，我们需要给每一个td，去添加这个属性，这里我就不添加太多了，只给第一行添加了，大家练习的时候，可以都加上，我们看下效果：

因为，我只给第一行添加了居中，所以呈现出的效果就如上图。

对于表格的练习，大家多练习练习，没什么难的，分析好几行几列后，就用tr和td写出来；上边的表格，还差一个标题，标题如何去写呢，之前已经学过了h系列标签，还有p标签，这两个都可以使用，这里我们再学一个局限于表格的标题标签，caption，我们直接上代码：

还是上边的例子啊，代码就不全粘贴了，这里只贴了部分代码：

效果如下：

基本上常规的表格，我们已经讲述完了，我们再来看看，不常规的。

看到上图，是一种什么感觉，是不是很直观地发现，有单元格的合并效果，这个在表格里面很常见，但在代码里该如何体现呢？首先我们先来了解下table的另两个属性，rowspan和colspan。

rowspan

跨行，也就是行与行之间合并，用法，rowspan=“2”，值为几，就是合并几行。

colspan

跨列，也就是列与列之间合并，用法，colspan=“2”，值为几，就是合并几列。

举个例子：

先看代码：

效果：

其实就是一个两行两列的代码，现在呢，我想要把1和2合并，也就是列与列之间合并，怎么合并，使用colspan属性呗，来，看代码：

效果展示：

有一点需要注意，你合并之后，一定要把多余的给去掉，大家可以看到，在代码中，第一行中，只有一个td标签，因为你要合并两个表格成为1个表格，所以，多余的要删除，合并3个，4个及多个，都是这样处理。

好，我们把代码还原，进行合并1和3,1和3是行之间的合并，进而要使用rowspan，代码如下：

效果如下：

注意：同样的，你合并时，也要记得，把多余的给删除，可以直接看代码，我的实现。

经过简单的练习后，那么我们直接实现刚开始的截图效果吧，就是如下图：

代码实现

效果如下：

这里为了表格展示好看，我用了width属性，具体大家可以看代码，好了，table表格相关的，基本上就结束了，也给大家举了很多例子，大家可以多写写，一定要掌握住哦。

4、文本格式化的使用

文本格式化，这个大家作为一个了解即可，所谓的文本格式，就是文本的样式，比如，加粗，斜体，大号字，小号字，插入字，删除字等。

我们找其中几个简单地展示一下，代码如下：

效果如下：

文本格式，大家作为一个了解，因为这些内容后期，大部分都被css所代替，不过大家能够掌握的话，也是一件好事，说个比较有意思的标签，就是pre，这个是预格式文本，也就说，它会保留你书写的格式。

比如代码如下：

效果：

5、总结及回顾

第二天的内容比较多，总共分为了三篇文章进行讲述，大家可以发现，基本上都是特别的详细，我可以这样说，这是目前网上关于网页制作教程中是最详细的，哈哈，有点飘了啊，之所以详细呢，就是为了照顾到零基础的朋友。

今天的总结回顾呢，两个掌握的知识点：

1、a标签的使用，本地和远程地址的跳转，新窗口的设置。

2、table标签的使用，掌握住tr，td，设置内外边距及单元格之间的合并。

今天的作业，就是把第二天当中所讲的内容，自己好好地敲上一遍，好了，就到这里吧，拜拜，我们第三天见。

HTML表格的构建中，<tr>标签（表格行）扮演着基础而关键的角色。正确使用表格行不仅能够提升数据展示的清晰度，还可以通过各种技巧增强表格的功能性和交互性。本文将深入探讨如何高效利用<tr>标签，从而在网页设计中实现更精细、更专业的布局和表现。

1. 理解<tr>标签的基本用途

1.1 <tr>标签概述

在HTML中，<tr>标签用于定义表格的行。每个<tr>元素内部可以包含一或多个<td>（表格单元格）或<th>（表头单元格）元素，用于展示具体的数据或标题。

1.2 创建基本的表格行

一个典型的表格行示例如下：

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>职位</th>
    </tr>
    <tr>
        <td>1</td>
        <td>王小明</td>
        <td>前端开发</td>
    </tr>
</table>

这个例子展示了如何使用<tr>来创建包含标题和一行数据的表格。

2. 样式化表格行

2.1 改善行的视觉效果

通过CSS，我们可以对表格行进行样式化，例如设置斑马线效果（条纹表格）、行悬停颜色等，以提升可读性和用户体验。

tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #ddd;
}

2.2 使用类和ID优化样式控制

给表格行添加类或ID，可以更细致地控制特定行的样式，这对于突出显示某些数据非常有用。

3. 动态交互的实现

3.1 使用JavaScript处理行事件

可以通过JavaScript为表格行添加点击事件，达到如弹出详细信息、修改数据等交互效果。

document.querySelectorAll("tr").forEach(row => {
    row.addEventListener("click", function() {
        alert("你点击了一行！");
    });
});

3.2 动态添加和删除行

在需要动态修改表格内容的场景下，可以通过JavaScript动态地添加或删除表格行。

function addRow() {
    const table = document.getElementById("myTable");
    const row = table.insertRow(-1);  // 插入到表格末尾
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);
    cell1.innerHTML = "新行单元格1";
    cell2.innerHTML = "新行单元格2";
}

4. 结语

通过深入了解和运用<tr>标签，你可以大幅提升HTML表格的功能性和视觉吸引力。无论是数据密集型网站还是需要高度定制的用户界面，精通这些技巧将使你在网页开发中更加得心应手。

结尾部分：
希望本文的分享能帮助你更好地掌握HTML中的<tr>使用技巧，无论是基础的数据展示还是复杂的用户交互，都能通过你的代码得到完美的实现。不断实践，不断创新，让我们在编程的路上一起进步！

lt;thead>标签定义HTML中<table>元素的标题；

<thead>标签与<tbody>和<tfoot>标签一起使用，它们定义HTML表格中的表头，表主体和表脚。

<thead>标签作为<table>标签的子元素，需出现在<caption>、<colgroup>元素之后；<tbody>，<tr>或<tfoot>元素之前。

<thead>标记内应至少包含一行<tr>元素。

提示：<thead>、<tbody>和<tfoot>元素默认不会影响表格的布局。不过可以使用CSS来为这些元素定义样式，从而改变表格的外观。

语法格式

<thead>

<thead>

示例代码

<table border="1">
    <caption>图书大厦书目价格单</caption>  
    <thead>  
        <tr>  
            <th>书名</th>  
            <th>单价</th>  
        </tr>  
    </thead>  
    <tr>  
        <td>HTML入门教程</td>  
        <td>79.00元</td>  
    </tr>  
    <tr>  
        <td>JavaScript基础教程</td>  
        <td>46.00元</td>  
    </tr>  
    <tr>  
        <td>Python精品教程</td>  
        <td>99.00元</td>  
    </tr>  
</table>  123456789101112131415161718192021复制代码类型：[html]

效果展示：

图书大厦书目价格单
书名	单价
HTML入门教程	79.00元
JavaScript基础教程	46.00元
Python精品教程	99.00元

HTML4.01与HTML5差异

在HTML5中，不再支持HTML4.01中<thead>标签的任何属性。

浏览器支持

所有主流浏览器都支持<thead>标签。

标签属性

属性	值	描述
align	right left center justify char	HTML5 不支持。定义 <thead> 元素中内容的对齐方式。
char	character	HTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐。
charoff	number	HTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量。
valign	top middle bottom baseline	HTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式。

全局属性

<thead>标签支持HTML的全局属性。

事件属性

<thead>标签支持HTML的事件属性。

开课吧广场-人才学习交流平台

在线咨询

上一篇：如何在网页中使用 web 字体？
下一篇：一个简单的个人网站模板

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

零基础10天学会网页制作第二天（下）之表格table标签

1. 理解<tr>标签的基本用途

1.1 <tr>标签概述

1.2 创建基本的表格行

2. 样式化表格行

2.1 改善行的视觉效果

2.2 使用类和ID优化样式控制

3. 动态交互的实现

3.1 使用JavaScript处理行事件

3.2 动态添加和删除行

4. 结语

语法格式

示例代码

效果展示：

HTML4.01与HTML5差异

浏览器支持

标签属性

全局属性

事件属性

您的项目需求