表格-示例(详细代码)

 

要做出上述表格来代码如下:

文档自带

<!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>
table{
text-align: center;文字居中
width:350px;表格宽
height: 120px;表格高
}
table tbody tr td{
border-top: 1px red solid;
}三条横线
table tbody tr:first-child td{
border-top: 2px red solid;
}最上面那一条粗点的横线单独设样式

</style>
</head>
<body>
  <table cellspacing="0" cellpadding="0"(表格本来有内外边距,将这两个值设为0后,便不会有边距)>(表格table)
    <thead>(表头)
      <tr>(table表头)
        <th>#</th>(字体会加粗的th)
        <th>First Name</th>
        <th>Last Name</th>
        <th>User Name</th>
      </tr>
    </thead>
    <tbody>(表身体)
      <tr>(表身体1)
        <td>1</td>(字体正常的td)
        <td>亮</td>
        <td>成</td>
        <td>@liang</td>
      </tr>
      <tr style="background: cornflowerblue;"(内联样式-只变这一个tr里的内容样式)>(表身体2)
        <td>2</td>
        <td>亮</td>
        <td>成</td>
        <td>@liang</td>
      </tr>
      <tr>(表身体3)
        <td>3</td>
        <td>亮</td>
        <td>成</td>
        <td>@liang</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

posted on 2019-11-06 15:46  咳咳1122  阅读(522)  评论(0编辑  收藏  举报

导航