html——网页上添加表格_怎样在网站中添加表格别人可以下载-程序员宅基地

有时候我们需要在网页上展示一些数据,如某公司想在网页上展示公司的库存清单。如下表:

想在网页上展示上述表格效果可以使用以下代码:

创建表格的四个元素:

table、tbody、tr、th、td

1、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。

2、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

3、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。

4、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

5、<th>…</th>:表格的头部的一个单元格,表格表头。

6、表格中列的个数,取决于一行中数据单元格的个数。

上述代码在浏览器中显示的默认的样式为:

总结:

1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的

2、表头,也就是th标签中的文本默认为粗体并且居中显示

 

 

为表格加入边框:

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

 

为表格添加标题‘

摘要

摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。

    语法:<table summary="表格简介文本">

标题

用以描述表格内容,标题的显示位置:表格上方。

     语法:

<table>
    <caption>标题文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lengyuefengqing/article/details/51697388

智能推荐

One of the configured repositories failed(yum配置存储库失败)-程序员宅基地

文章浏览阅读1w次,点赞5次,收藏26次。One of the configured repositories failed(yum配置存储库失败)_one of the configured repositories failed

JavaWeb_10-框架和项目_javaweb 老项目框架-程序员宅基地

文章浏览阅读169次。自定义框架(ORM框架),持久层框架(mybatis,hibernate)MVC框架(springmvc,struts2)目标:完成自定义springmvc框架项目流程:1.首页加载出最新的前四个商品(按更新时间降序排列)异步请求:按时间排序选到前四个热销商品:在订单明细表中找出前三个卖的最好商品信息(按照productId进行分组,统计数量,按照数量降序排序,取出符合条件的产品id降序排列,再根据id取到数据库信息)分类:暂时不需要parentId进行递归,直接查询出所有分类信息进行显示_javaweb 老项目框架

收藏几款好用的mysql的客户端工具_mysql客户端有哪些-程序员宅基地

文章浏览阅读2.8w次,点赞2次,收藏6次。工欲善其意,必先利其器。好用的工具能成倍提高工作效率,缩短与成功的距离。1. EMSSQL ManagerforMySQL:首先他支持mysql的版本从3.23到6.0都是可以得,也就是说他支持现在所有的版本。他有很友好的界面的非常适合初学者来使用,想找到什么都很方便。2. navicat:也是非常适合初学者使用的工具,他的风格是简单好用,在安装过程中提供7种语言进行选择。..._mysql客户端有哪些

最小二乘法拟合圆 拟合球 公式推导及matlab实现_matlab circlefit函数-程序员宅基地

文章浏览阅读1.1w次,点赞9次,收藏116次。最小二乘法(least squares analysis)是一种数学优化技术,它通过最小化误差的平方和找到一组数据的最佳函数匹配。最小二乘法是用最简的方法求得一些绝对不可知的真值,而令误差平方之和为最小。 最小二乘法通常用于曲线拟合 (least squares fitting) 。这里有拟合圆曲线的公式推导过程和vc实现。多个点拟合圆并给出圆心坐标。matlab 实现:funct..._matlab circlefit函数

详解IP地址-程序员宅基地

文章浏览阅读834次,点赞2次,收藏15次。一、IP地址概念IP地址是一个32位的二进制数,它由网络ID和主机ID两部份组成,用来在网络中唯一的标识的一台计算机。网络ID用来标识计算机所处的网段;主机ID用来标识计算机在网段中的位置。IP地址通常用4组3位十进制数表示,中间用“.”分隔。比如,192.168.0.1。补充(IPv6):前面所讲的32位IP地址称之为IPv4,随着信息技术的发展,IPv4可用IP地址数..._http//192.168.176.15/

牛客_21313美丽序列_动态规划_一行两个整数,表示最美丽的段的起始下标和终止下标,如果有多段最美丽的段,请输出-程序员宅基地

文章浏览阅读224次。21313美丽序列题目描述牛牛喜欢整数序列,他认为一个序列美丽的定义是1:每个数都在0到40之间2:每个数都小于等于之前的数的平均值具体地说:for each i, 1 <= i < N, A[i] <= (A[0] + A[1] + … + A[i-1]) / i.3:没有三个连续的递减的数现在给你一个序列,每个元素是-1到40,你可以将序列中的-1修改成任意的数,求你可以得到多少个美丽序列,答案对1e9+7取模输入描述:第一行输入一个整数n (1 ≤ n ≤ 40_一行两个整数,表示最美丽的段的起始下标和终止下标,如果有多段最美丽的段,请输出

随便推点

getvalue参数计数不匹配_那些你不知道的 Python面试题(干货)-程序员宅基地

文章浏览阅读161次。今天带大家感受一波真正的大厂(大公司)的面试真题,我们从现实的热爱Python到现实转化为改变我们生活的幸福基础的金钱是我们的必经阶段,所以关注真正的试题也是我们要做的一个重要的工作。下面我们就开始对这些体进行简单暴力的解答吧!1、一行代码实现1--100之和利用sum()函数求和2、列出5个python标准库os:提供了不少与操作系统相关联的函数sys: 通常用于命令行参数re: 正则..._getvalue和fun

Springer期刊转投_springer nature transfer desk-程序员宅基地

文章浏览阅读3.5k次。写论文投稿至Springer旗下期刊。期刊编辑建议转投,然后查阅了关于转投之后的一些问题,看到了一个链接下的文章,觉得还是解决了一些疑惑的,将链接附在下面,希望能够帮到其他和我遇到一样问题的人期刊主编会“歧视”转投稿件么? Transfer Desk如果 有可能的话,我也会记录部分关于转投的经历。..._springer nature transfer desk

qiankun 微前端_2020年你必须要会的微前端 (实战篇)-程序员宅基地

文章浏览阅读5k次。最近你有没有经常听到一个词,微前端?是不是听上去感觉非常地高大上!然而~微前端其实非常地简单,非常地容易落地,而且也非常不高大上~那么就来一起看看什么是微前端吧:一.为什么需要微前端?这里我们通过3W(what,why,how)的方式来讲解什么是微前端:1.What?什么是微前端?微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆, 拆完..._qiankun微前端 el-menu

vue+element下拉列表默认值_vue list默认值-程序员宅基地

文章浏览阅读1.7w次,点赞2次,收藏9次。下拉列表中的三项条目deviceSNMPList,默认选中:deviceSNMP:‘1’, deviceSNMPList: [ { key: '0', label: 'v1' }, { key: '1', label: 'v2c' ..._vue list默认值

Chrome下载_谷歌下载官网-程序员宅基地

文章浏览阅读1.4w次,点赞10次,收藏27次。参考:​​​​​​​​​​​​​​​​​​​​​https://zhuanlan.zhihu.com/p/97198043_谷歌下载官网

Android 10 获取已连接的蓝牙设备的当前电量_android 读取蓝牙手柄电量-程序员宅基地

文章浏览阅读5.2k次,点赞4次,收藏13次。项目中有获取连接蓝牙设备电量的小需求,查找了一些资料,发现谷歌在Android8.0推出了一个getBatteryLevel的api,用来获取蓝牙设备电量百分比的方法。但在我的项目中android10生产环境,这个方法在Bluetoothdevice类的源码内,已经被标识为废弃不可直接调用的方法。如下图所示但是研究一番发现可以通过反射,继续调用这个方法。我将过程写入了一个类内,没有进一步简..._android 读取蓝牙手柄电量

推荐文章

热门文章

相关标签