1. 全栈程序员必看首页

html表格菜鸟教程_exls表格

全栈程序员-站长 • • 未分类 • 阅读 3

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


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>

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

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

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/169639.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0

相关推荐

  • performClick()方法的使用「建议收藏」

    performClick()方法的使用「建议收藏」

    performClick()方法的使用「建议收藏」1.performClick()方法的作用：   performClick（）方法是使用代码主动去调用控件的点击事件（模拟人手去触摸控件）2. 使用注意事项： 如果同时使用了view.setOnTouchListener()方法，则有可能存在拦截view.performClick()的响应事件， 因为当view.OnTouchEvent()在event.getAc

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月13日
  • mysql的乐观锁使用_java悲观锁乐观锁定义

    mysql的乐观锁使用_java悲观锁乐观锁定义

    mysql的乐观锁使用_java悲观锁乐观锁定义正确的理解MySQL的乐观锁，悲观锁与MVCC！首先声明，MySQL的测试环境是5.7前提概念数据库并发的三种场景乐观锁和悲观锁的澄清悲观锁乐观锁MVCC多版本并发控制总结乐观锁和悲观锁的抉择OCC,PCC,MVCC参考资料前提概念数据库并发的三种场景数据库并发场景有三种，分别为：读-读：不存在任何问题，也不需要并发控制读-写：有隔离性问题，…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月30日
  • 初识Zigbee协议栈及其安装

    初识Zigbee协议栈及其安装

    初识Zigbee协议栈及其安装1.什么是Zigbee协议栈？什么是ZigBee协议栈呢？它和ZigBee协议有什么关系呢?协议是一系列的通信标准，通信双方需要共同按照这一标准进行正常的数据发射和接收。协议栈是协议的具体实现形式，通俗点来理解就是协议栈是协议和用户之间的一个接口，开发人员通过使用协议栈来使用这个协议的，进而实现无线数据收发。ZigBee的协议分为两部分，IEEE802.15.4定义了PHY（物理层）和MAC（介质访问层）技术规范；ZigBee联盟定义了NWK（网络层）、APS（

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月8日
  • 单目视觉定位测距的两种方式[通俗易懂]

    单目视觉定位测距的两种方式[通俗易懂]

    单目视觉定位测距的两种方式[通俗易懂]单目定位和双目定位的选择，我觉得主要还是成本和时间的考虑。之前也尝试过双目定位，感觉要更精准些，但双目测距需要对两幅图像进行图像变换和极线匹配，稍微耗时了一些。这几天尝试了一下单摄像头进行测距定位，主要有两个思路：　　1.定位测量插值得到每个像素的实际坐标　　　　该方法总觉得有很大的问题：一个是摄像头安装后就必须固定不动，稍微的旋转都会导致之间测量的像素点对应的坐标偏移。另一个是人工测量的

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月15日
  • dedecms 图集标签{dede:productimagelist} {dede:field name=’imgurls’}&nbs

    dedecms 图集标签{dede:productimagelist} {dede:field name=’imgurls’}&nbs

    dedecms 图集标签{dede:productimagelist} {dede:field name=’imgurls’}&nbs

    全栈程序员-站长的头像 全栈程序员-站长
    2021年9月22日
  • Java的运行机制（一）

    Java的运行机制（一）

    Java的运行机制（一）前言：还是那句话，第一、凡是涉及到概念性内容的时候，我都会到官网去确认内容的真实性！第二、我喜欢偏向于原理学习。在java介绍里面，我认为知道这是一门完全面向对象的语言就足够了。我的导师说C++是认为程序员是很强大的，开放了所有的功能权限；Java是认为程序员不是那么全能的，有些危险的操作，不会让你执行。不知道您是否也这么认为呢？目录一、类的结构二、运行机制1、编译方式…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月8日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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