html表格菜鸟教程_exls表格

html表格菜鸟教程_exls表格HTML基础之表格文章目录HTML基础之表格1.表格的定义2.表格的标签3.单元格边框(border)4.合并单元格4.1合并行单元格(colspan)4.2合并列单元格(rowspan)5.表格格式设置5.1单元格的对齐(align)(居中,左对齐,右对齐)5.2.背景色&图片(bgcolor&background)5.2.1单元格背景色&图片5.2.2表格背景色&图片5.3单元格的边距(cellpadding)5.4单元格间的距离(cel

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

HTML 表格

1. 表格的定义

<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr><th><td> 元素组成表格结构;其中: <tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。
为了让表格更美观,我们会用到:border,colspan,rowspan,align,bgcolor 等来美化表格,具体在本文都有讲解;

2. 表格的标签

在HTML定义表格的时候,有以下标签供我们使用

NO 表格标签 用处
1 <table> 定义表格,生成的表格在一对<table></table>中;
2 <caption> 定义表格标题,当表格需要标题时,使用<caption>表格标题</caption>
3 <thead> 定义表格的页眉
4 <tbody> 定义表格的主体
5 <tfoot> 定义表格的页脚
6 <th> 定义表格的表头,一般是表头中的内容会被加黑;
7 <tr> 定义表格的行
8 <td> 定义表格单元格
9 <col> 定义用于表格列的属性
10 <colgroup> 定义表格列的组

3. 单元格边框(border)

表格边框:在使用<table border="1"></table> 的方式来定义,其中:数字表示边框的宽度,单位为像素;以下举三个边框的例子;

<!--无边框-->
<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td></td>
    </tr>

</table>

<br>
<!--边框宽度为2-->
<table border="2">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td></td>
    </tr>

</table>
<br>

<!--边框宽度为10-->
<table border="10">
    <tr>
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>1</td>
        <td>马里奥</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>桃花公主</td>
        <td></td>
    </tr>

</table>

上述代码效果:
在这里插入图片描述

4. 合并单元格

合并单元格时,合并行使用:colspan=“2”; 合并列使用:rowspan=“2” (这里的 ‘2’ 表明合并两个单元格),举例如下:

4.1 合并行单元格(colspan)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body>

<h4>合并行单元格:</h4>
<table border="1">
<caption>通讯录</caption>
<tr>
  <th>姓名</th>
  <th colspan="2">邮箱</th>
</tr>
<tr>
  <td>zhang kai</td>
  <td>123456@qq.com</td>
  <td>123456@163.com</td>
</tr>
</table>

</body>
</html>

上述代码效果:
在这里插入图片描述

4.2 合并列单元格(rowspan)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body>

<h4>合并列单元格:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="3">邮箱</th>
  <td>123456@qq.com</td>
</tr>
<tr>
  <td>123456@163.com</td>
</tr>
<tr>
  <td>123456@sina.com</td>
</tr>
</table>

</body>
</html>

上述代码效果:
在这里插入图片描述

5. 表格格式设置

5.1 单元格的对齐(align)(居中,左对齐,右对齐)

在对应的标签上增加 align 键值对,生效方式为”就近原则”,如下例中,桃花公主单元格为left生效;

align 值 left center right
效果 左对齐 居中 右对齐
<table width="600" border="2">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left">马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

上述代码效果(为了看清效果,所以设置了表格宽度 width=“600” ):
在这里插入图片描述

5.2. 背景色&图片(bgcolor & background)

  • 添加背景色使用:bgcolor
  • 添加背景图片使用:background

5.2.1 单元格背景色&图片

在单元格的标签上增加 bgcolor 或者 background,就可以添加背景色或者背景图片,以背景色为例;

<table width="600" border="2">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

上述代码效果:
在这里插入图片描述

5.2.2 表格背景色&图片

在表格的标签上增加bgcolor 或者 background,就可以添加背景色或者背景图片,以背景图片为例;

<table width="600" border="2" background='https://p1.ssl.qhimgs1.com/sdr/400__/t01f04c2504aa62bab7.gif'>
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left">马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>

</table>

上述代码效果(由于我挑了一张动态图,所以这里的背景是动态的!):
在这里插入图片描述

5.3 单元格的边距(cellpadding)

<table></table>标签使用cellpadding 即可,方法与上面的图片一样,直接举例如下:

<table width="600" border="2" cellpadding="8">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

上述代码效果:
在这里插入图片描述

5.4 单元格间的距离(cellspacing)

<table></table>标签使用 cellspacing 即可,方法与上面的图片一样,直接举例如下:

<table width="600" border="2" cellspacing="8">
    <tr align="center">
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

上述代码效果:
在这里插入图片描述

5.5 显示部分边框(frame & rules)

  • 可以在<table></table>标签内,增加 frame 键值对,控制表格外边框;键值对对应关系如下:
frame 键值 效果
void 不显示外侧边框
above 显示上部的外侧边框
below 显示下部的外侧边框
hsides 显示上部和下部的外侧边框
vsides 显示左边和右边的外侧边框
lhs 显示左边的外侧边框
rhs 显示右边的外侧边框
box 在所有四个边上显示外侧边框
border 在所有四个边上显示外侧边框
  • 可以在<table></table>标签内,增加 rules 键值对,控制表格外边框;键值对对应关系如下:
frame 键值 效果
none 没有线条
groups 位于行组和列组之间的线条
rows 位于行之间的线条
cols 位于列之间的线条
all 位于行和列之间的线条
  • frame 举例如下:
<table width="600" cellspacing="8" frame="box">
    <tr align="center" >
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center" >1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

输出效果:
在这里插入图片描述

  • rules举例如下:
<table width="600" cellspacing="8" rules="cols">
    <tr align="center" >
        <th> 编号 </th>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td align="center" >1</td>
        <td align="left" bgcolor='red' >马里奥</td>
        <td align="right"></td>
    </tr>
    <tr align="right">
        <td>2</td>
        <td align="left">桃花公主</td>
        <td></td>
    </tr>
</table>

输出效果:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/169639.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pycharm2021年激活码【注册码】

    pycharm2021年激活码【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Android中fragment A里面点击button跳转到fragment B实现方法

    Android中fragment A里面点击button跳转到fragment B实现方法

  • vim的配置文件_vim编辑文件命令

    vim的配置文件_vim编辑文件命令vimcfg.tar.bz2.txtvimbase64格式常用配制文件

  • docker项目经验_如何培育与指导部署

    docker项目经验_如何培育与指导部署每个人的前半生,都在不停地做加法。可到了后半生,我们就要学会不断地做减法。目录前置工作1、需要准备的东西2、连接云服务器安装Docker环境1、安装Docker的依赖库。2、添加DockerCE的软件源信息。3、安装DockerCE。4、启动Docker服务。准备Dockerfile并部署项目(构建新的业务镜像)1、准备nginx.conf.template、Dockerfile、dist(前端项目build后的包)2、部署项目知识点(需要…

    2022年10月19日
  • veryCD 不能下载了,我们该怎么办?

    veryCD 不能下载了,我们该怎么办?程序员一般都是看教学视频,自己学习,想要大牛手把手教你,估计是不可能的,原来大家都喜欢veryCD这个免费分享平台,可是近期它关掉了,没办法,所有免费的软件资源都下载不了,笔者最近也想下载国嵌的视频,觉得讲的不错,可惜,哎。不过,这些也难不倒学计算机的同学们,veryCD关闭了ed2k的服务,不代表我们迅雷不可以下载ed2k的东西,于是我们要利用百度的力量:我们下载国嵌的usb描述符一类

  • java 环境变量配置_java环境变量的详细配置「建议收藏」

    java 环境变量配置_java环境变量的详细配置「建议收藏」前言学习java的第一步就要搭建java的学习环境,首先是要安装JDK,JDK安装好之后,还需要在电脑上配置”JAVA_HOME”、”path”、”classpath”这三个环境变量才能够把java的开发环境搭建好。在没安装过jdk的环境下,path环境变量是系统变量,本来存在的,而JAVA_HOME和classpath是不存在的。一、配置JAVA_HOME变量操作步骤(win7系统):计算机…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号