链接元素功能和表格课堂基础知识 -

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 链接元素功能和表格课堂基础知识

博主信息

博文 6

粉丝 0

访问量 4427

专题推荐

更多>

一、链接元素

1.跳转到指定页面

<a href="https://www.php.cn/">php中文网</a>

2.在新页面打开

<a href="https://www.php.cn/" target="_blank">php中文网</a>

3.下载文件

<a href="demo1.html">下载文件</a>

4.拔打电话

<a href="tel:10086">电话</a>

5.发送邮件

<a href="mailto:310007***@qq.com">邮件</a>

6.锚点

<!--通过锚点，可以实现在当前页面内部跳转-->
<a href="#anchor">当前页面跳转</a>
<!--<h1 id="anchor">跳到这里了</h1>-->
<h1 id="anchor" style="margin-top: 1000px">跳到这里了</h1>

二、表格

1、常用标签

序号	描述	标签
1	<table>	定义表格
2	<tbody>	定义表格主体,允许多次定义
3	<tr>	定义表格中的行
4	<td>	定义表格主体与底部的单元格
5	<th>	定义表格头部中的单元格，默认加粗居中
6	<caption>	定义表格标题
7	<thead>	定义表格头格，只需定义一次
8	<tfoot>	定义表格格底，只需定义一次
9	<col>	为一个/多个列设置属性
10	<colgroup>	将多个<col>元素分组管理

2、常用属性

序号	属性	适用元素	描述
1	<border>	<table>	添加表格框
2	<cellpadding>	<table>	设置单元格内边框
3	<cellspacing>	<table>	设置单元格边框间隙
4	align	不限	设置单元格内水平居中
5	bgcolor	不限	设置背景色
6	width	不限	设置宽度
7	height	不限	设置高度

3、课程表案例

<!DOCTYPE html>
<html lang="en">
 <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-       width, initial-scale=1.0" />
<title>表格元素2-行与列合并</title>
<link rel="stylesheet" href="css/style4.css" />
 </head>
 <body>
<!-- 添加表格边框设置长、宽、高、居中 -->
<table
  border="1"
  width="600"
  cellspacing="0"
  cellpadding="5"
  height="200"
  align="center"
>
  <!-- 设置表头字体大小、下外边距 -->
  <caption style="font-size: 1.5rem; margin-bottom: 10px">
    合肥市第九十六小学课程表
  </caption>
  <!-- 整个课程表是九行七列 -->
  <thead>
    <tr>
      <!-- 无论是行合并，还是列合并，colspan,rowspan必须写到单元格中 -->
      <th colspan="2"></th>
      <th>星期一</th>
      <th>星期二</th>
      <th>星期三</th>
      <th>星期四</th>
      <th>星期五</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- 无论是行合并，还是列合并，colspan,rowspan必须写到单元格中 -->
      <td rowspan="4">上午</td>
      <td>1</td>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>英语</td>
      <td>语文</td>
    </tr>
    <tr>
      <!-- <td>上午</td> -->
      <td>2</td>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>美术</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- <td>上午</td> -->
      <td>3</td>
      <td>数学</td>
      <td>英语</td>
      <td>语文</td>
      <td>美术</td>
      <td>数学</td>
    </tr>
    <tr>
      <!-- <td>上午</td> -->
      <td>4</td>
      <td>英语</td>
      <td>语文</td>
      <td>数学</td>
      <td>音乐</td>
      <td>语文</td>
    </tr>
    <tr>
      <!-- 中午休息 -->
      <td colspan="7" align="center">中午休息</td>
    </tr>
    <tr>
      <!-- 下午 -->
      <td rowspan="3">下午</td>
      <td>5</td>
      <td>语文</td>
      <td>数学</td>
      <td>英语</td>
      <td>美术</td>
      <td>音乐</td>
    </tr>
    <tr>
      <!-- 下午 -->
      <td>6</td>
      <td>数学</td>
      <td>英语</td>
      <td>语文</td>
      <td>数学</td>
      <td>数学</td>
    </tr>
    <tr>
      <!-- 下午 -->
      <td>7</td>
      <td>活动课：</td>
      <td colspan="4" align="center">各班自行组    织，自愿参加</td>
    </tr>
  </tbody>
</table>
 </body>
</html>