HTML表格基础与应用
需积分: 9 65 浏览量
更新于2024-08-01
收藏 4.86MB PPT 举报
"北大青鸟html课件2"
在学习HTML时,表格是一个重要的元素,尤其在构建网页布局和展示数据时。本章主要讲解了HTML表格的基础知识,包括表格的构成、基本语法以及如何创建和美化表格。
首先,回顾HTML标签的特性:HTML标签一般不区分大小写,但为了代码规范,通常建议使用小写字母。HTML的基本结构包括文档类型声明(<!DOCTYPE html>),html标签(<html>...</html>),head标签(<head>...</head>)用于存放元信息如标题、CSS样式等,body标签(<body>...</body>)则包含网页的主要内容。
页面链接有多种类型,如内部链接(链接同一网页内的不同位置)、外部链接(链接到其他网站)和锚点链接(链接到页面内的特定位置)。超链接的基本格式是:<a href="链接地址">链接文字</a>,其中href属性指定链接的目标,链接文字是用户点击的部分。
预习检查中提到,表格由行(<tr>...</tr>)和列(<td>...</td>)组成,创建一个基本的表格至少需要<table>、<tr>和<td>标签。本章的任务是制作两个不同的页面,并掌握使用表格相关标签来实现复杂布局,如跨行、跨列,以及进行美化修饰。
表格在各种类型的网站中都有广泛应用,例如论坛、门户网站和购物网站。在论坛中,表格常用于展示版块分类;在门户网站上,表格可以用于排列新闻或信息;而在购物网站,商品列表通常以表格形式展示。
表格的基本结构包括<TABLE>标签用于定义表格,<TR>标签定义行,而<TD>标签定义列。border属性用于设置表格边框的尺寸,例如<TABLE border="2">将创建一个边框宽度为2像素的表格。创建一个简单的表格,如以下示例:
```
<TABLE border="2">
<TR>
<TD>移动</TD>
<TD>联通</TD>
<TD>铁通</TD>
</TR>
<TR>
<TD>IBM</TD>
<TD>惠普</TD>
<TD>华硕</TD>
</TR>
</TABLE>
```
跨行跨列的表格可以通过使用COLSPAN和ROWSPAN属性实现。COLSPAN="n"表示单元格跨n列,ROWSPAN="n"表示跨n行。例如:
```
<TABLE border="2">
<TR>
<TD colspan="3">学生成绩表</TD>
</TR>
<TR>
<TD>英语</TD>
<TD>数学</TD>
<TD>语文</TD>
</TR>
<TR>
<TD>95</TD>
<TD>98</TD>
<TD>89</TD>
</TR>
</TABLE>
```
在这个例子中,“学生成绩表”单元格跨了3列。通过熟练掌握这些基础知识,可以创建出各种复杂和美观的HTML表格,以满足网页设计和数据展示的需求。
domgtaoli
- 粉丝: 0
- 资源: 3
最新资源
- encapsulamento
- 3D花瓶模型效果图
- learnC-4-macro
- 首页列表翻页教程网(带手机) v3.74
- Pan
- bdsegal.github.io
- FP-PSP-SERVER
- awesome-playgrounds:一系列令人敬畏的Xcode Swift游乐场,围绕诸如计算机科学,数学和物理等主题的交互性和指导性使用而集中
- login-mypage
- CKEditor v4.7.1
- engrid-scripts
- 麻将厅3D模型设计
- CodeFun:存放代码示例的地方
- automationpractice:与Azure DevOps集成的测试项目
- 塞恩·普勒
- prettyconf:用于设置代码分离的可扩展库