清爽html5表格多头效果

代码语言:html

所属分类:表格

代码描述:清爽html5表格多头效果

代码标签: 多头 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
     

        body {
            background: #fb887c;
            color: #fff;
            font-family: 'Lato', Arial, sans-serif;
        }

        h1 {
            font-family: "proxima-nova",sans-serif;
            letter-spacing: -0.01em;
            font-weight: 700;
            font-style: normal;
            font-size: 60px;
            margin-left: -3px;
            line-height: 1em;
            color: #fff;
            text-align: center;
            margin-bottom: 8px;
            text-rendering: optimizeLegibility;
        }

        table {
            width: 80%;
            margin: auto;
        }

        table, th, td {
            border: 1px solid #fff;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
        }
</style>

</head>
<body translate="no">
<h1>HTML5 Table</h1>
<table>
<thead>
<tr>
<th rowspan="1" colspan="2">Article</th>
<th rowspan="2" colspan="2">Table</th>
<th rowspan="1" colspan="2">Article</th>
<th rowspan="2" colspan="2">Table</th>
</tr>
<tr>
<th rowspan="2">Section</th>
&.........完整代码请登录后点击上方下载按钮下载查看

网友评论0