html好看的表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
<br/>
</p>
<section class="diy-editor">
<section style="margin: 0px auto;text-align: center;">
<section class="diybrush" data-brushtype="text" style="font-size: 18px;letter-spacing: 2px;padding: 10px 1em;color: #aa4c00;background: #ffe0b2;border-top-left-radius: 10px;border-top-right-radius: 10px;">
新手入门，煮菜教程
</section>
<section style="display: flex;justify-content: center;align-content: center;border: 1px solid #fcd7ad;">
<section class="diybrush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;padding: 4px 1em;color: #aa4c00;font-weight: bold;flex-shrink: 0;align-self: center;">
面包塔
</section>
<section style="border-left: 1px solid #fcd7ad;">
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#5c5c5c;padding: 1em;">
<p>
食材：牛油果、蔬菜、鸡蛋、全麦面包、酸奶
</p>
</section>
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#5c5c5c;border-top: 1px solid #fcd7ad;padding: 1em;">
<p hm_fix="299:422">
做法：1、鸡蛋水煮熟；2、牛油果去核，加入柠檬汁和少许盐，打成泥；3、将牛油果泥涂抹在面包片上，再放上切片的鸡蛋和蔬菜；4、浇上酸奶或者少量花生酱即可。
</p>
</section>
</section>
</section>
<section class="box-edit">
<section class="assistant" style="display: flex;justify-content: space-between;align-items: flex-end;">
<section class="assistant" style="box-sizing:border-box;height: 15px;width: 1px;background: #fcd7ad;"></section>
<section class="assistant" style="box-sizing:border-box;height: 15px;width: 1px;background: #fcd7ad;"></section>
</section>
<section style="display: flex;justify-content: center;align-content: center;border: 1px solid #fcd7ad;">
<section class="diybrush" data-brushtype="text" style="font-size: 16px;letter-spacing: 1.5px;padding: 4px 1em;color: #aa4c00;font-weight: bold;flex-shrink: 0;align-self: center;">
鸡胸肉
</section>
<section style="border-left: 1px solid #fcd7ad;">
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#5c5c5c;padding: 1em;">
<p>
食材：蔬菜、鸡蛋、紫薯、鸡胸肉、坚果
</p>
</section>
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#5c5c5c;border-top: 1px solid #fcd7ad;padding: 1em;">
<p>
做法：1、紫薯蒸熟压成泥；2、蔬菜切成合适大小；3、鸡胸肉无油煎好，切小块；4、挤上柠檬汁，加入少量橄榄油，胡椒粉、盐搅拌均匀；5、撒上一把坚果即可。
</p>
</section>
</section>
</section>
</section>
</section>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<table class="table" style="font-size: 14px; table-layout: fixed; min-width: auto; width: 100%;">
<thead>
<tr class="firstRow">
<th colspan="2" style="background-color:#f5f5f5; border:1px solid #ddd; color:#666; font-size:16px; height:31px; padding:8px; text-align:center">
商品参数
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: right; word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
镜头品牌
</td>
<td style="word-break: break-all; padding: 5px 10px; border: 1px solid #DDD;">
Canon/佳能
</td>
</tr>
<tr>
<td style="text-align: right; word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
全画幅
</td>
<td style="word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
支持
</td>
</tr>
<tr>
<td style="text-align: right; word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
拍摄场景
</td>
<td style="word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
人物
</td>
</tr>
<tr>
<td style="text-align: right; word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
镜头滤镜尺寸
</td>
<td style="word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
82mm
</td>
</tr>
<tr>
<td style="text-align: right; word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
焦距
</td>
<td colspan="1" rowspan="1" style="word-break: break-all;padding: 5px 10px; border: 1px solid #DDD;">
24-70mm
</td>
</tr>
</tbody>
</table>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<section style="margin: 0px auto;text-align: left;">
<section style="display: flex;justify-content: flex-start;align-items: flex-end;">
<section style="display: inline-block;margin-top: 1em;">
<section style="border: 1px solid #a57548;padding:4px 1em;border-top-left-radius: 8px;border-top-right-radius: 8px;border-bottom: none;">
<section class="diybrush" data-brushtype="text" style="font-size: 18px;letter-spacing: 1.5px;padding: 0px 0em;color: #a57548;font-weight: bold;">
美式沙拉
</section>
<section class="diybrush" data-brushtype="text" style="font-size: 12px;letter-spacing: 1px;padding: 0px 0em;color: #926b49;">
AMERICAN SALAD
</section>
</section>
</section>
</section>
<section>
<section style="border: 1px solid #a57548;padding: 10px 1em;border-top-right-radius: 10px;">
<section style="font-size: 16px;letter-spacing: 1.5px;color: #333;">
<span class="diybrush" data-brushtype="text" style="font-weight: bold;">材料</span><span class="diybrush" data-brushtype="text" style="font-size: 14px;margin-left: 6px;color: #a1a1a1;">Material</span>
</section>
</section>
<section style="border: 1px solid #a57548;padding: 10px 1em;border-top: none;">
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;">
<p>
土豆、苹果、鸡肉、药芹、核桃、生菜叶、色拉油沙司、鲜奶油、糖粉、胡椒粉。
</p>
</section>
</section>
</section>
<section class="box-edit">
<section style="border: 1px solid #a57548;padding: 10px 1em;border-top: none;">
<section style="font-size: 16px;letter-spacing: 1.5px;color: #333;" hm_fix="344:553">
<span class="diybrush" data-brushtype="text" style="font-weight: bold;">工具</span><span class="diybrush" data-brushtype="text" style="font-size: 14px;margin-left: 6px;color: #a1a1a1;">Kitchenware</span>
</section>
</section>
<section style="border: 1px solid #a57548;padding: 10px 1em;border-top: none;">
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;">
<p>
便当盒、水果刀、水果甩干机、鸡蛋切片器
</p>
</section>
</section>
</section>
<section>
<section style="border: 1px solid #a57548;padding: 10px 1em;border-top: none;">
<section style="font-size: 16px;letter-spacing: 1.5px;color: #333;">
<span class="diybrush" data-brushtype="text" style="font-weight: bold;">制作</span><span class="diybrush" data-brushtype="text" style="font-size: 14px;margin-left: 6px;color: #a1a1a1;">Making</span>
</section>
</section>
<section style="border: 1px solid #a57548;padding: 10px 1em;border-top: none;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;">
<p>
1、将土豆蒸熟去皮，鸡肉煮熟，核桃去皮;
</p>
</section>
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;">
<p>
2、加胡椒粉、鲜奶油、糖粉、色拉油沙司拌匀;
</p>
</section>
<section data-autoskip="1" class="diybrush" style="text-align: justify;line-height:1.75em;letter-spacing: 1.5px;font-size:14px;color:#333;">
<p>
3、将生菜叶平铺在小盘里，上面放拌好的苹果色拉。
</p>
</section>
</section>
</section>
</section>
</section>
<p>
<br/>
</p>
<section class="diy-editor">
<table class="table table-hover table-bordered table-striped table-condensed">
<tbody>
<tr class="ue-table-interlace-color-single firstRow">
<th style="border-color: rgb(18, 150, 219); background-color: rgb(18, 150, 219); text-align: center; color: rgb(255, 255, 255);" rowspan="1" colspan="4">
<span style="color: #FFFFFF;">普通表格</span><br/>
</th>
</tr>
<tr class="ue-table-interlace-color-double">
<td valign="top" style="border-color: rgb(18, 150, 219);" width="162">
姓名
</td>
<td valign="top" style="border-color: rgb(18, 150, 219);" width="162">
年龄
</td>
<td valign="top" style="border-color: rgb(18, 150, 219);" width="162">
学历
</td>
<td valign="top" style="border-color: rgb(18, 150, 219);" width="163">
性别
</td>
</tr>
<tr class="ue-table-interlace-color-single">
<td valign="top" style="border-color: rgb(18, 150, 219);" width="162">
小明<br/>
</td>
<td valign="top" style="border-color: rgb(18, 150, 219);" width="162">
23
</td>
<td valign="top" style="border-color: rgb(18, 150, 219);" width="162">
本科
</td>
<td valign="top" style="border-color: rgb(18, 150, 219);" width="163">
男
</td>
</tr>
<tr class="ue-table-interlace-color-double">
<td valign="top" colspan="1" rowspan="1" style="border-color: rgb(18, 150, 219);" width="162">
小红
</td>
<td valign="top" colspan="1" rowspan="1" style="border-color: rgb(18, 150, 219);" width="162">
22
</td>
<td valign="top" colspan="1" rowspan="1" style="border-color: rgb(18, 150, 219);" width="162">
本科
</td>
<td valign="top" colspan="1" rowspan="1" style="border-color: rgb(18, 150, 219);" width="163">
女
</td>
</tr>
</tbody>
</table>
</section>
<p>
<br/>
</p>
</body>
</html>
评论 (0)