1. 全栈程序员必看首页

html表格菜鸟教程_怎么把excel表格导入word

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

html表格菜鸟教程_怎么把excel表格导入wordHTML基础之表格文章目录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>

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

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

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

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


相关推荐

  • GIT生成SSH-KEY公钥放到服务器免密登录「建议收藏」

    GIT生成SSH-KEY公钥放到服务器免密登录「建议收藏」

    GIT生成SSH-KEY公钥放到服务器免密登录

    全栈程序员-站长的头像 全栈程序员-站长
    2022年2月8日
    43
  • lora协议不属于lpwan_哪种协议用于wan

    lora协议不属于lpwan_哪种协议用于wan

    lora协议不属于lpwan_哪种协议用于wan考虑使用LoRaWAN部署您的物联网解决方案？倘若您正在开发用于工业或企业用途的专用网络解决方案，那么您需要了解此技术的一些限制(以及在许多情况下将为您提供更好服务的替代协议)。在本文中，我们将深入探讨：LoRa与LoRaWAN的区别LoRaWAN如何运作LoRaWANA，B和C类啁啾率，处理增益和正交性利用LoRaWAN构建专用网络的障碍另一种解决方案：SymphonyLinkLoRa与Lo…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月7日
    1
  • 惠普台式电脑安装系统按哪个键_hp不识别u盘装系统

    惠普台式电脑安装系统按哪个键_hp不识别u盘装系统

    惠普台式电脑安装系统按哪个键_hp不识别u盘装系统当我们使用U盘给电脑装系统时，需要进入BIOS设置从USB启动，不过设置BIOS太麻烦了，而且大多数电脑现在都支持快捷键启动，如惠普笔记本，那么惠普usb装系统按哪个键呢？接下来小编就跟大家讲解一下，希望能够帮助到大家。惠普usb装系统步骤阅读1、将U盘插在电脑的USB接口，开机并不断按下启动U盘快捷键f12。2、在进入系统启动菜单中选择有USB字样的选项并回车。3、重启电脑，选择YunQiShi…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月13日
    8
  • 浏览器被hao360劫持解决办法

    浏览器被hao360劫持解决办法

    浏览器被hao360劫持解决办法浏览器被hao360劫持怎么办chromeedge被hao360劫持解决办法建议chromeedge被hao360劫持chrome和edge被hao360劫持后的样子解决办法在该目录下C:\ProgramData\Microsoft\Windows\StartMenu\Programs删除被hao360修改快捷方式（edge为例chrome我已删除了）最后浏览器回复正常。建议安装软件到对应官网下载正规软件安装…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月26日
    22
  • 主成分分析与因子分析及SPSS实现[通俗易懂]

    主成分分析与因子分析及SPSS实现[通俗易懂]

    主成分分析与因子分析及SPSS实现[通俗易懂]主成分分析与因子分析及SPSS实现一、主成分分析（1）问题提出在问题研究中，为了不遗漏和准确起见，往往会面面俱到，取得大量的指标来进行分析。比如为了研究某种疾病的影响因素，我们可能会收集患者的人口学资料、病史、体征、化验检查等等数十项指标。如果将这些指标直接纳入多元统计分析，不仅会使模型变得复杂不稳定，而且还有可能因为变量之间的多重共线性引起较大的误差。有没有一种办法能对信息进行浓缩，减少变量的个…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月17日
    42
  • Android preference_android:orientation=”vertical”

    Android preference_android:orientation=”vertical”

    Android preference_android:orientation=”vertical”【正文】一、PreferenceFragment的引入：PreferenceActivity是一个非常有用的基类，当我们开发Android项目时避免不了选项设置，这些设置习惯用Preference来保存。Android专门为这种Activity提供了便捷的基类PreferenceActivity。如果继承自Preference则不需要自己控制Preference的读写，Preference

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

发表回复

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

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