html表格

HTML高级(表格标签)

只愿长相守 提交于 2020-01-22 08:04:57
<table></table> 属性: bgcolor:背景色 border:边框 bordercolor:边框颜色 bordercolorlight:边框高亮部分的颜色,border > 1有效 bordercolordark:边框灰暗部分的颜色, border > 1有效 cellspacing:单元格间隔 cellspadding:单元格内容与边框间隔 width:表格的宽度 height:表格的高度 <tr></tr>:创建行 属性 : align:水平对齐 valign:垂直对齐 bgcolor:背景色 <td></td>:创建列 属性 : align:水平对齐 valign:垂直对齐 width:宽度 heigth:高度 colspan:单元格所占的列数,缺省值为1 rowspan:单元格所占的行数,缺省值为1 nowrap:不自动换行 问题:当表格中内容过长时,表格会被变长。如何解决? <th></th>:表头标签(加粗居中) <caption></caption>:标题标签 <table border=1 bgcolor=red bordercolor=blue bodercolorlight=green bordercolordark=yellow cellspacing=20 cellpadding=50 width=50% height=50% align

基于Vue.js的表格分页组件

不想你离开。 提交于 2020-01-22 01:00:26
BootPage组件简介 其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一个简单的分页组件来实现简单的分页功能,我便在这里分享一下,大家自觉填坑咯。 如需高大上的组件,可以移步Vue官方组件库: https://github.com/vuejs/awesome-vue#libraries--plugins BootPage是一款支持静态数据和服务器数据的表格分页组件,支持调整每页显示行数和页码显示个数,样式基于bootstrap,就像这样: 在线演示: https://luozhihao.github.io/B... 使用方法 在.vue的组件文件中我们这样写template,即html代码: <table class="table table-hover table-bordered"> <thead> <tr> <th width="10%">id</th> <th width="30%">name</th> <th width="40%">content</th> <th width="20%">remark</th> </tr> </thead> <tbody> <tr v-for="data in

html表格设置

久未见 提交于 2020-01-21 09:08:10
表格 表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 在浏览器显示如下: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 表格和边框属性 如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。 使用边框属性来显示一个带有边框的表格: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> 表格的表头 表格的表头使用 <th> 标签进行定义。 大多数浏览器会把表头显示为粗体居中的文本: <table border="1"> <tr> <th>Heading</th> <th

详解HTML中的表格标签

橙三吉。 提交于 2020-01-20 20:08:53
详细代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表格制作</title> </head> <body> <table bgcolor="black" width="500px"> <caption style="bold">学生信息</caption> <thead> <tr bgcolor="#a9a9a9" height="50px"> <th>姓名</th> <th>年龄</th> <th>学校</th> <th>考试成绩</th> <th>喜欢水果</th> <th>经常上的网站</th> </tr> </thead> <tbody> <tr bgcolor="white" align="center" height="30px"> <td align="left">张三</td> <td>22</td> <td>西安工业大学</td> <td>87</td> <td>桃子</td> <td> <a href="http://www.baidu.com/">百度 </a> <a href="http://www.sina.com/">新浪</a> </td> </tr> <tr bgcolor=

前端学习(454):创建表格

▼魔方 西西 提交于 2020-01-20 16:37:52
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> td{border: 1px solid #000000;width: 100px;height: 50px;} </style> </head> <body> <script> function createTable(row,col){ var table="<table>"; for(var i=0;i<row;i++){ table+="<tr>"; for(var j=0;j<col;j++){ table+="<td></td>"; } table+="</tr>" } document.write(table); } createTable(4,4); </script> </body> </html> 运行结果 来源: CSDN 作者: 你知道歌谣吗? 链接: https://blog.csdn.net/weixin_43392489

CSS 表格的细线边框

我的梦境 提交于 2020-01-19 15:32:54
表格的细线边框 以前学过的html表格边框很粗,这里只需要CSS一句话就可以美观起来。 让我们真的相信,CSS就是我们的白马王子(白雪公主)。 table{ border-collapse:collapse; } collapse 单词是合并的意思 border-collapse:collapse; 表示相邻边框合并在一起。 来源: CSDN 作者: 快乐de馒头 链接: https://blog.csdn.net/chunxiaqiudong5/article/details/104038331

HTML的基础知识

邮差的信 提交于 2020-01-19 00:49:58
HTML(Hyper Text Markup Langugue) 超文本标记语言,一种规范 预定义,已经定义好的各种标记,只需要我们把对应的标记放到合适的位置 一. HTML 基本语法与基本结构(重点) 标记的使用 1、标记一般成对出现,包含开始标记和结束标记 2、标记可以嵌套使用,但是不能交叉使用 3、标记不区分大小写 属性的使用(属性控制内容的格式,额外的格式) 1、书写位置在开始标记中 2、格式:属性名=“属性值”,多个属性之间使用空格分割 3、不同的标记属性可能相同也可能不同 4、属性使用的标记中,只能对本标中的内容记产生影响 5、属性不冲突时,效果叠加,属性冲突时,就近原则 html 的基本结构 <html>---- 声明网页 <head>---- 网页的头部信息 <title> 标题 </title>---- 网页的标题 </head> <body>---- 网页的主体,网页内容主要展示的部分 网页的主要内容 </body> </html> 二. 文本格式的应用 1 、标题标记 <hn> ,n的取值1-6,1级标题最大 效果:加粗显示,带有自动换行 属性: align 控制标题的对齐方式,取值 left (左对齐,默认值)| center (居中)| right (右对齐) 2 、段落标记 <p> 效果:把内容分段展示,自动换行 属性: align

w3c搬运CSS念念碎

冷暖自知 提交于 2020-01-18 01:51:10
w3c搬运CSS念念碎 基本使用 当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。 如果值为若干单词,则要给值加引号 p { font-family: "sans serif"; } 是否包含空格不会影响 CSS 在浏览器的工作效果,不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。 选择器 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。 id选择器:#id名 在现代布局中,id

关于表格相同元素合并单元格的实例

自闭症网瘾萝莉.ら 提交于 2020-01-16 05:45:17
这个标题名字还真不好取,一般想要这种功能的还真不好搜到这篇内容,只能静待有缘人了。(有好的标题,可以留言,我改还不行么?) 最近公司有一个新的项目需求,要求的是合并单元格,看似也没什么难度,但实际操作起来,确实不好做。(但理解了里面的逻辑,也就几行代码的问题) 然后前几天在一次看群里面聊天的时候,发现其他人也遇到了这样的需求。 要求是这样的,先来张图片 就是这种效果,将红色框部分合并起来,看似很简单的,但是注意,我们的 数据是动态的,数据量是非常庞大的 。完成后的效果如下 以为我们现在的项目是用vue框架写的,刚开始尝试用vue的思想来解决,发现没法下手。最终还是操作dom来完成的。 首先从后端的数据,是要有一定规范的,其实我们可以把他看成是一种树状结构。但是后端给的数据,其实还是标准的结构,表格一个循环就能解析出来的 我这里的标题数据,跟内容数据是分开来的。 我对后端要求的数据结构是这样的。 标题部分: TableTitle: ['标题1', '标题2', '标题3','标题1', '标题2', '标题3'], 内容部分: TableBody: [ { value : [ { title: 't1', val: 'a1', }, { title: 't2', val: 'b1', }, { title: 't3', val: 'c1', }, { title: 't4', val

layui 表格嵌套

為{幸葍}努か 提交于 2020-01-16 01:16:42
layui 表格嵌套 < ! DOCTYPE html > < html xmlns : th = "http://www.thymeleaf.org" > < head th : include = "shared/_layout::header('后台管理登录')" > < / head > < body > < table class = "layui-hide" id = "demo" lay - filter = "test" > < / table > < script type = "text/html" id = "barDemo" > < a class = "layui-btn layui-btn-primary layui-btn-xs" lay - event = "detail" > 查看 < / a > < / script > < script type = "text/html" id = "barDemo1" > < a class = "layui-btn layui-btn-primary layui-btn-xs" lay - event = "detail" > 查看 < / a > < / script > < script > layui . use ( [ 'laydate' , 'laypage' , 'layer' ,