html表格制作代码 html表格制作代码大全 收藏 0

学习CSS布局：简单表格布局代码示例

CSS是现代Web设计和开发的必备技能之一。而表格布局是Web页面中常用的布局之一，用于展示数据和信息。在这篇文章中，我们将介绍如何使用CSS创建一个简单的表格布局，并提供代码示例，帮助您更好地了解CSS的表格布局。

HTML代码

在CSS中创建表格布局之前，我们首先需要创建表格结构的HTML代码。下面是一个简单的表格结构的HTML代码示例：

html

<table>

<thead>

<tr>

<th>姓名</th>

<th>年龄</th>

<th>性别</th>

</tr>

</thead>

<tbody>

<tr>

<td>张三</td>

<td>20</td>

<td>男</td>

</tr>

<tr>

<td>李四</td>

<td>25</td>

<td>女</td>

</tr>

<tr>

<td>王五</td>

<td>30</td>

<td>男</td>

</tr>

</tbody>

</table>

在这个示例中，我们使用<table>元素创建了一个表格，使用<thead>元素创建了表格头部，使用<tbody>元素创建了表格主体，使用<tr>元素创建了表格行，使用<th>和<td>元素分别创建了表格头和单元格。

CSS代码

在HTML代码完成后，我们需要使用CSS样式来创建表格布局。下面是一个简单的CSS样式代码示例：

css

table {

border-collapse: collapse;

width: 100%;

text-align: center;

}

thead th {

background-color: #eee;

font-weight: bold;

}

tbody td {

border: 1px solid #ddd;

padding: 8px;

}

tbody tr:nth-child(even) {

background-color: #f2f2f2;

}

在这个示例中，我们使用了border-collapse属性来将表格边框合并为单一的边框，使用width属性将表格宽度设置为100%，使用text-align属性将表格内容居中对齐。使用thead和tbody选择器来定义表格头和表格主体的样式，使用background-color属性来设置表格头的背景颜色和字体加粗，使用border和padding属性来定义表格单元格的边框和内边距，使用nth-child伪类选择器来为奇数行和偶数行设置不同的背景颜色。

如何用python生成简单的html report报告

前提：

用python写了一个简单的log分析，主要也就是查询一些key，value出来，后面也可以根据需求增加。查询出来后，为了好看，搞个html 表格来显示。

需要的组件： jinja2 flask 的模板。

先说下设计思路，主要是练习python代码玩，高手略过

模拟scrapy，搞个管线

每个管线分预处理，分析器，和后处理。预处理的话，可以筛选下数据，分析器提取关键信息，然后把结果丢给后处理。html报表就是在后处理生成。

再搞个manger类，管理很多个管线，虽然现在单路pipeLine就完成了，说不定以后还能扩展呢。

我们可以定义预处理，比如过滤一些不关注的关键字，或者关注一些特定关键字的行

预处理的话，只处理QtiDCT-C关键字的日志行。

然后把经过预处理后的数据丢给分析器

主要查询行数据行里面是否有keyword，然后根据分隔符，和结束符来提取内容

keyword delimiter xxxxxendwith 这样个模式

获取最终结果存储到字典里面 result[keyword]=xxxx。这里会trim,去掉 \\r\\n.

这样就有了结果集result.最后丢给posthandler 后处理。完成报表输出。

后处理主要是用jinja2的模板，然后传递参数，生成最终的html文件。

这里的jinja_template.temple, 内容如下

有了模板，就可以在渲染模板的时候提供字典，变量，在模板里面显示。最终完成报表的输出。

最终使用

最终在main 方法中，通过-d参数传入log所在目录，然后迭代所有的文件，使用input 把文本文件转换成行数据的list，丢给管线，最后把管线丢给manager，调用process ，完成txt日志的分析，到最后html的生产。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com