html中table的使用（2）一般数据表

最新推荐文章于 2024-04-13 18:51:12 发布
最新推荐文章于 2024-04-13 18:51:12 发布
阅读量1.3k 收藏
点赞数
分类专栏： web开发 文章标签： html css table 数据表格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/way_hj/article/details/50929421
版权

<!DOCTYPE html>
<html>
<head>
<title>数据表</title>
<style type="text/css">
*{margin:0;padding:0;}
table{
margin:10px;
width:80%;
border-left:1px solid #666666;
border-bottom:1px double #666666;
}
caption{
border-right:1px solid #666;
border-top:1px solid #666;
border-left:1px solid #666;
padding: 5px 0 5px 0;
background-color:#F5F5F5;
}
thead tr th{
padding: 5px 0 5px 0;
background-color:#90EE90;
border-bottom:1px double #000080;
}
tbody tr{
text-align:center;
}
th,td{
border-right:1px solid #666666;
border-top:1px solid #666666;
}
.alt{
background:#F0F8FF;
}
tr:hover{
background:#7CFC00;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<caption>住房贷款还款计划</caption>
<thead>
<tr>
<th>序号</th>
<th>住址</th>
<th>姓名</th>
<th>借贷日</th>
<th>借贷金额</th>
<th>期限</th>
<th>贷款利率</th>
<th>还贷日</th>
<th>还贷金额</th>
<th>银行</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="alt">
<td>2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="alt">
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------------------------------------------------

注意：为了使行达到交叉背景色的效果，不要在*{}中设置background，否则tr的background会失效。

way_hj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML的table表格元素及用法
qq_52016943的博客
05-26 2157
1.<table>标签 表格通过七个标签创建，分别是 <table>表格标签 <tr>行标签 <th>表头标 <td>表格数据标签 <thead>定义表头 <tbody> 元素用于对 HTML 表格中的主体内容进行分组 <tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。 ...
HTML 中表格table 的相关知识
zhenghao35791的专栏
02-13 726
标签中比较少见的属性和子标签： summary 属性：用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。 bordercolor 属性：用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。                             （不推荐使用bordercolor 属性，而推荐使用CSS 样式表的border 属性来进行设置） cellspacing
html表格最大显示行数6,Bootstrap-table自定义可编辑每页显示记录数
weixin_31451617的博客
06-18 873
写在前面：最近在做的person功能，由于后期系统中person人数较多，不利用查找person,故需求方将要求可以自己编辑每页显示的数目，而不是固定的写死每页显示的数目。下面先来看下bootsrap-table自带的可切换每页显示记录数的图片 其实我感觉自带的这个下拉框选择每页显示的记录数，已经很方便啦，只需要给几个值就可以了，但是为了更加人性化与方便，就要改的呢，初步想的是，直接将此处的下拉框...
一文搞懂HTML中的表格、表单、列表
最新发布
2301_78850344的博客
04-13 1360
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！
html中table标签用法
chengxuzx的博客
05-29 1万+
1.<table> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>biaoge</title> </head> <body> <table border="1" cellpadding="0" cellspacing="8"> <tr> ...
HTML中Table表格的使用与漂亮的表格模板
热门推荐
pan_junbiao的博客
08-04 7万+
1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。 标记 说明 表格标记<table> <table></table>标记表示整个表格。<ta...
html Table 表头固定的实现
09-22
主要介绍了html Table 表头固定的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html table表数据转Json格式示例代码
09-28
HTML表格（Table）是网页中常用的数据展示方式，但有时我们需要将这些数据转换为更方便处理的格式，例如JSON（JavaScript Object Notation）。JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器...
html中table数据排序的js代码
10-28
最近应项目要求，需要对table中的数据进行升序或降序排列，于是研究了一下js，希望对大家有帮助。
htmlTable数据表模板 转换pdf 用到itextsharp5.4.0
07-02
htmlTable数据表模板 转换pdf 用到itextsharp5.4.0 自定义函数 算术运算符，关系运算符，以及逻辑运算符 预定义函数getRMB(double num)getRMBs(string num) 一些默认的类型方法函数，如double, float, string, ...
动态生成表格，金额转换，datatable
tlljhj的专栏
11-10 395
创建动态表格： HtmlTable table = new HtmlTable();  //表格创建完成         for (int i = 0; i         {             HtmlTableRow row = new HtmlTableRow();             for (int j = 0; j             {
使用数据库记录动态填充HTML Table控件
08-23
使用数据库记录动态填充HTML Table控件
HTML中表格（table）的常规用法
ljh666dee的博客
01-27 691
HTML中表格（table）的常规用法
关于html中的表格table的用法
糖小喵
03-09 2277
HTML中使用标记建立表格，使用格式： 1、表示一个表格 2、标记内嵌套多对，每一对表示一行 3、每一对内嵌套多对，每一对表示一个单元格 3、是一对特殊的，可以用以定义表头元素，居中显示为黑体 5、与、(或)需要一起工作 以下关于的用法 border属性：表格外框的宽度（单位px），默认为0（没外框） align属性：表格相对页面的对齐方式（left, center, righ
HTML-table表格详解
主营前端方向，技术栈是vue
11-17 2万+
table表格(结构设置tr行、td列，rowspan纵合并colspan横合并,spacing边距collapse边框合并，thead表头tbody表体tfoot表底，补充)
HTML基础——表格
Leo的博客
04-01 214
表格：用来展示数据的，让数据显示整齐规范，展示数据 表单：用来收集用户信息的 列表：用来布局，使页面布局整齐规范 表格： 一个完整的表格有表格标签table，行标签tr，单元格标签td（都是双标签）。 tr中只能嵌套td类的单元格，td标签就像一个容器，可以容纳所有的元素。 将td变成th就可以将字体加粗。 表格标题标签caption，（居中且在表格之上），caption标签必须是在table标签之上，且只能写在table标签的内部。 表格示例1——个人信息表： <table bord.
html input 输入 table,js算法--输入行列，生成一个表格（table）
weixin_33498603的博客
06-07 1074
html:请输入行数:请输入列数:创建javaScript:functino autocreate() {var line = document.getElementById('rows').value;var list = document.getElementById('cols').value;var test = document.getElementById('test');var ta...
如何向html表格中输入文本
River的博客
07-31 1万+
由于在制作html 表格，即table。会出现制作好的表格却不能输入文字的情况。 于是，我们可以有两种选择。 （1）添加文本框，即:                               这样就可以往表格里面添加文本啦 （2）利用html5中的属性contenteditable即可，而且不会出现边框叠加的颜色加深问题  用法：
html表格
two_orion的博客
01-26 704
在html基础中，表格算比较重要的部分，学好表格对于之后css美化页面和js都非常有帮助，那么今天就将我学到的总结在这里。也是让自己对于这标签更加的熟悉。 1.表格的主要作用 表格主要是为了显示，展示数据，因为他可以把数据显示的非常规整，可读性非常好，特别是后台展示数据（并非用来布局页面）。 2.基本语法 <table>//定义表格标签 <tr>//定义表格中的行 <th>（表头单元格）,经常位于表格第一行加粗显示
HTML如何把table到处为数据表
09-04
您好，关于您的问题，HTML中通过使用<table>标签来创建数据表，其中可以使用标签定义表格的列头，再用标签定义每一行，用标签定义每个单元格的内容，如下所示： <table> 姓名 年龄 性别 张三 <td>25 男...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值