【html 表格样式】table 设置

最新推荐文章于 2024-07-26 14:13:22 发布
置顶 最新推荐文章于 2024-07-26 14:13:22 发布
阅读量6.4k 收藏 1
点赞数 1
分类专栏： 数据展示--web前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013421629/article/details/78087372
版权 
<style>
    <%include file="bootstrap.min.css"/>
</style>
<div style="text-align:center;width:80%;padding: 8px; line-height: 1.42857; vertical-align: top; border-top-width: 1px; border-top-color: rgb(221, 221, 221); background-color: #28a745;color:#fff"><strong>用户运营数据报表</strong></div>
<table class="table table-bordered table-hover" style="width:80%">
    <tr>
    % for column in row:
      <th style="background-color:pink">${column}</th>
    % endfor
    % for index, rows in enumerate(rows_data):
        <tr>
        % for column in [row_headers[index]] + rows:
            <td>${column}</td>
        % endfor
        </tr>
    % endfor
</table>

这里写图片描述

<table border="1" class="dataframe" style="width:80%">
  <thead>
     <div style="text-align:center;width:78.18%;padding: 8px; line-height: 1.42857; vertical-align: top; border-top-width: 1px; border-top-color: rgb(221, 221, 221); background-color: #3399CC;color:#fff"><strong>债权订单数据报表</strong></div><tr style="background-color:#FFCC99;text-align:center;">
      <th></th>
      <th>order_no</th>
      <th>debt_no</th>
      <th>create_time</th>
      <th>return_msg</th>
    </tr>
  </thead>
  <tbody>
    <tr style="text-align:center">
      <th>0</th>
      <td>20170927000001</td>
      <td>WND20170927000001</td>
      <td>2017-09-27 10:25:56</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>1</th>
      <td>20170927000006</td>
      <td>WND20170927000006</td>
      <td>2017-09-27 11:10:15</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>2</th>
      <td>20170927000007</td>
      <td>WND20170927000007</td>
      <td>2017-09-27 11:12:25</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>3</th>
      <td>20170926000037</td>
      <td>WND20170926000037</td>
      <td>2017-09-27 11:26:42</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>4</th>
      <td>20170927000004</td>
      <td>WND20170927000004</td>
      <td>2017-09-27 12:03:10</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>5</th>
      <td>20170927000008</td>
      <td>WND20170927000008</td>
      <td>2017-09-27 12:23:46</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>6</th>
      <td>20170927000003</td>
      <td>WND20170927000003</td>
      <td>2017-09-27 12:41:44</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>7</th>
      <td>20170927000009</td>
      <td>WND20170927000009</td>
      <td>2017-09-27 13:32:48</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>8</th>
      <td>20170927000017</td>
      <td>WND20170927000017</td>
      <td>2017-09-27 14:12:06</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>9</th>
      <td>20170927000018</td>
      <td>WND20170927000018</td>
      <td>2017-09-27 14:40:42</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>10</th>
      <td>20170927000024</td>
      <td>WND20170927000024</td>
      <td>2017-09-27 14:46:13</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>11</th>
      <td>20170927000013</td>
      <td>WND20170927000013</td>
      <td>2017-09-27 14:53:08</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>12</th>
      <td>20170927000010</td>
      <td>WND20170927000010</td>
      <td>2017-09-27 14:53:55</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>13</th>
      <td>20170926000017</td>
      <td>WND20170926000017</td>
      <td>2017-09-27 15:29:02</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>14</th>
      <td>20170927000026</td>
      <td>WND20170927000026</td>
      <td>2017-09-27 15:33:47</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>15</th>
      <td>20170927000029</td>
      <td>WND20170927000029</td>
      <td>2017-09-27 16:08:44</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>16</th>
      <td>20170927000028</td>
      <td>WND20170927000028</td>
      <td>2017-09-27 16:56:14</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>17</th>
      <td>20170927000035</td>
      <td>WND20170927000035</td>
      <td>2017-09-27 17:01:41</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>18</th>
      <td>20170927000027</td>
      <td>WND20170927000027</td>
      <td>2017-09-27 17:02:03</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>19</th>
      <td>20170927000034</td>
      <td>WND20170927000034</td>
      <td>2017-09-27 17:09:35</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>20</th>
      <td>20170927000036</td>
      <td>WND20170927000036</td>
      <td>2017-09-27 17:19:03</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>21</th>
      <td>20170927000038</td>
      <td>WND20170927000038</td>
      <td>2017-09-27 17:20:05</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>22</th>
      <td>20170927000037</td>
      <td>WND20170927000037</td>
      <td>2017-09-27 17:38:02</td>
      <td>{"success":true}</td>
    </tr>
  </tbody>
</table>

这里写图片描述

版本3：

< !DOCTYPE html >  
< html > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>font-size字体大小测试-DIVCSS5实验</title> 
<style type="text/css"> 
body{ font-size:12px; line-height:24px;} 
.exp1{font-size:12px;} 
.exp2{font-size:xx-small;} 
.exp3{font-size:small;} 
.exp4{font-size:x-large;} 
.exp5{font-size:larger;} 
.exp6{font-size:smaller;} 
.exp7{font-size:50%;} 
.exp8{font-size:150%;} 
</style> 
<!-- www.divcss5.com --> 
</head> 
<body> 
<div class="exp1">我被font-size值为12px大小</div> 
<div class="exp2">我被font-size值为xx-small大小</div> 
<div class="exp3">我被font-size值为small大小</div> 
<div class="exp4">我被font-size值为x-large大小</div> 
<div class="exp5">我被font-size值为larger大小</div> 
<div class="exp6">我被font-size值为smaller大小</div> 
<div class="exp7">我被font-size值为50%大小</div> 
<div class="exp8">我被font-size值为150%大小</div> 
</body> 
</html>

这里写图片描述

<style type="text/css">
table {
border-right: 1px solid #99CCFF;
border-bottom: 1px solid #99CCFF;
}
table td {
border-left: 1px solid #99CCFF;
border-top: 1px solid #99CCFF;
}
table th {
border-left: 1px solid #99CCFF;
border-top: 1px solid #99CCFF;
}
</style>

<table border="0" class="dataframe" style="width:80%" cellspacing="2" cellpadding="2">
  <thead>
     <div style="text-align:center;width:78.18%;padding: 8px; line-height: 1.42857; vertical-align: top; border-top-width: 1px; border-top-color: rgb(221, 221, 221); background-color: #3399CC;color:#fff"><strong ><font size="4">债权订单数据报表</font> </strong></div><tr style="background-color:#CCFFCC;color:#000000;text-align:center;">
      <th>num</th>
      <th>order_no</th>
      <th>debt_no</th>
      <th>create_time</th>
      <th>return_msg</th>
    </tr>
  </thead>
  <tbody>
    <tr style="text-align:center;">
      <th>0</th>
      <td>20170927000001</td>
      <td>WND20170927000001</td>
      <td>2017-09-27 10:25:56</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>1</th>
      <td>20170927000006</td>
      <td>WND20170927000006</td>
      <td>2017-09-27 11:10:15</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>2</th>
      <td>20170927000007</td>
      <td>WND20170927000007</td>
      <td>2017-09-27 11:12:25</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>3</th>
      <td>20170926000037</td>
      <td>WND20170926000037</td>
      <td>2017-09-27 11:26:42</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>4</th>
      <td>20170927000004</td>
      <td>WND20170927000004</td>
      <td>2017-09-27 12:03:10</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>5</th>
      <td>20170927000008</td>
      <td>WND20170927000008</td>
      <td>2017-09-27 12:23:46</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>6</th>
      <td>20170927000003</td>
      <td>WND20170927000003</td>
      <td>2017-09-27 12:41:44</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>7</th>
      <td>20170927000009</td>
      <td>WND20170927000009</td>
      <td>2017-09-27 13:32:48</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>8</th>
      <td>20170927000017</td>
      <td>WND20170927000017</td>
      <td>2017-09-27 14:12:06</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>9</th>
      <td>20170927000018</td>
      <td>WND20170927000018</td>
      <td>2017-09-27 14:40:42</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>10</th>
      <td>20170927000024</td>
      <td>WND20170927000024</td>
      <td>2017-09-27 14:46:13</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>11</th>
      <td>20170927000013</td>
      <td>WND20170927000013</td>
      <td>2017-09-27 14:53:08</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>12</th>
      <td>20170927000010</td>
      <td>WND20170927000010</td>
      <td>2017-09-27 14:53:55</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>13</th>
      <td>20170926000017</td>
      <td>WND20170926000017</td>
      <td>2017-09-27 15:29:02</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>14</th>
      <td>20170927000026</td>
      <td>WND20170927000026</td>
      <td>2017-09-27 15:33:47</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>15</th>
      <td>20170927000029</td>
      <td>WND20170927000029</td>
      <td>2017-09-27 16:08:44</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>16</th>
      <td>20170927000028</td>
      <td>WND20170927000028</td>
      <td>2017-09-27 16:56:14</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>17</th>
      <td>20170927000035</td>
      <td>WND20170927000035</td>
      <td>2017-09-27 17:01:41</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>18</th>
      <td>20170927000027</td>
      <td>WND20170927000027</td>
      <td>2017-09-27 17:02:03</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>19</th>
      <td>20170927000034</td>
      <td>WND20170927000034</td>
      <td>2017-09-27 17:09:35</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>20</th>
      <td>20170927000036</td>
      <td>WND20170927000036</td>
      <td>2017-09-27 17:19:03</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>21</th>
      <td>20170927000038</td>
      <td>WND20170927000038</td>
      <td>2017-09-27 17:20:05</td>
      <td>{"success":true}</td>
    </tr>
    <tr>
      <th>22</th>
      <td>20170927000037</td>
      <td>WND20170927000037</td>
      <td>2017-09-27 17:38:02</td>
      <td>{"success":true}</td>
    </tr>
  </tbody>
</table>
东华果汁哥
关注
专栏目录
html5 自定义表格样式,最简单导出table为excel表格并自定义表格样式
weixin_40007804的博客
06-16 809
普通方式下包npm i -S file-saver xlsx在util文件夹新建类建立to_xlsx.jsimport FileSaver from ‘file-saver‘;import XLSX2 from ‘xlsx‘;class ToXlsx {// id指的是绑定数据的table的id，// title指的是导出表格的名称，记得带后缀xlsx，例如：title=‘重复导.xlsx‘;co...
自适应Table表格样式特效代码
03-20
为了解决这一问题，"自适应Table表格样式特效代码"应运而生。这种特效代码利用了CSS3的先进技术，使得表格在不同屏幕尺寸下都能保持良好的可读性和视觉效果，从而提高用户在手机、平板电脑和桌面电脑等多平台的浏览...
html中table的表格样式
05-24
NULL 博文链接：https://zhou-hong-liang.iteye.com/blog/365301
Html Table 样式
yuling59520的专栏
06-01 2万+
框线制作常用代码代码含义<table>...</table>建立表格，所有的其他标记都需要在此标记中  <table width=* heigth=*></table>设定表格宽度width和高度height，属性值可以使用点数，如：width=50，也可以使用百分比，如：width=50%。<table bgcolor=*></table> 表格背景色。属性值可使用颜色英文名称如：bgcolor=Blue，也可以使用十六进制值如：bgcolor=#799ED2 。<table background=*><
【HTML+CSS】HTML表格：从基础到进阶的全面指南
最新发布
Xiaoxin的博客
07-26 1350
在Web开发中，HTML表格（）是一个不可或缺的元素，它不仅能够以结构化的方式展示数据，还能通过CSS进行丰富的样式设计，提升用户体验。本文将带你从HTML表格的基础语法开始，逐步深入到表格的高级用法，包括布局技巧、响应式设计以及无障碍访问性优化。
【表格样式】——HTML制作表格大全
热门推荐
Hello World
08-13 11万+
标签的属性设置 带边框的表格： FoodDrinkSweet ABC Food Drink Sweet A B C 不带边框的表格： FoodDrinkSweet ABC Food Drink Sweet A B C
HTML的表格样式
Raccon_的博客
11-22 1280
HTML5 表格 <table> <tr> <th>1</th>(th为列标题 自动加粗居中) <th>2</th> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 属性: 宽度:width 高度:
表格样式.html
04-26
表格样式.html
AngularJS表格样式简单设置方法示例
10-20
在本文中，我们将深入探讨如何在AngularJS中设置表格样式，特别是在结合Bootstrap框架时的实用技巧。AngularJS是一款强大的前端JavaScript框架，它允许开发者构建动态和交互式的Web应用。Bootstrap则是一种流行的...
教大家轻松制作Bootstrap漂亮表格（table）
11-27
- `table`: 这是基础表格样式，确保表格的呈现符合Bootstrap的样式规范。 - `table-striped`: 添加这个类后，表格的行会交替显示不同的背景色，形成类似斑马纹的视觉效果。 - `table-hover`: 当鼠标悬停在某一行时，...
HTML表格样式
ZYX13721846745的博客
10-08 8069
9675人阅读 行跟列背景颜色的选择，合并等 列的颜色选择代码 <colgroup span="1" bgcolor="lightgreen"></colgroup> <colgroup span="1" bgcolor="lightyellow"></colgroup> <colgroup span="2" bgcolor="lightgreen"> <col bgcolor="lightgray"> <col&
html表格css样式
03-02
十个多种样式表格边框，代码完全呈现，而且颜色不一样可以根据自己的网站布局设计改变。
html 简单的table样式
weixin_33912445的博客
05-05 869
效果预览： 代码： 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta charset="utf-8"&gt; 5 &lt;title&gt;html 简单的table样式&lt;/title&gt; 6 &lt;style type=&q
HTML常用table样式
hello
01-02 9826
转自：http://atgoingguoat.iteye.com/blog/2074431 常用table样式，备自己常年复制用。   效果图       Java代码   "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml
HTML中Table表格的使用与漂亮的表格模板
pan_junbiao的博客
08-04 7万+
1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。 标记 说明 表格标记<table> <table></table>标记表示整个表格。<ta...
html 表格样式
liwateryi的专栏
11-12 377
表格样式 .tablelist { font-family: 微软雅黑,verdana,arial,sans-serif; font-size:12px; color:#333333; border:solid 1px #999999; border-collapse: collapse; margin:auto; } .tablelist th { background-col
html中table的样式设置
sunyv1的博客
07-13 8729
因为用到了一个自定义的表格所以这里记录一下样式写法 这里的样式基本上指的是边框了 先说明一下设置边框的方式 设置table的border属性，如下。当然样式我就不说了不建议这么干 <table border="1"></table> 之后的两种都是用css实现的，这里先说一种 //边框什么的自己写吧 table{ //主要用到的就是这个属性，这个属性可以让边框重叠，就是让两个边框加一起没那么宽了 //实际上并不好使，因为涉及到重叠问题，坑就不说了 border-col
【HTML】表格样式
~★sunshine☆的博客专栏
04-19 892
表格样式 .tabelist{ border:1px solid #429fff;/*表格边框*/ font-family:"楷体"; border-collapse:collapse;/*边框重叠*/} .tabelist caption{ background-image:url(t01e781575902ba7f2a.jpg);/*背景*/ padding-top:3px
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东华果汁哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值