Html之表格

作者: 追逐_chase | 来源:发表于2018-02-23 17:22 被阅读0次

Html之表格
HTML之表格
HTML5学习笔记之表格标签
HTML表格-13
HTML基础之表格
HTML学习之表格
HTML之表格 · Table
Html之table表格
HTML之表格布局
CSS 表格属性

timg.jpg

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下：
row 1, cell 1   row 1, cell 2
row 2, cell 1   row 2, cell 2

表格.png

使用.png

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金牌</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }


        table{
            margin: 50px  50px;
            /*border: 1px solid #cccccc;*/
            width: 248px;
            height: 190px;
            /*合并边框模型*/
            border-collapse: collapse;
        }
        table caption {
            height: 30px;
            line-height: 30px;
            background: url("images/1.gif");
            border:1px solid #0CBAFF;
            color: white;
            text-align: left;
            padding-left: 10px;

            font-weight: bold;
            font-family: Arial;
            font-size: 14px;


        }

        thead {
            border: 1px solid #D2E9F6;
            background-color:#D2E9F6 ;


        }

        thead tr  {
            height: 27px;

        }

        thead tr th{
            font-weight: normal;
            font-size: 12px;
        }

        tbody {
            border: 1px solid #CCCCCC;
            border-top: none;
        }
        tbody tr {
            border:  1px dotted #cccccc;
        }

        tbody tr td {
            text-align:  center;
            font-size: 12px;
        }


    </style>
</head>
<body>

    <table >
        <caption>金牌top</caption>
        <thead>
            <tr>
                <th>排名</th>
                <th>国家</th>
                <th>金</th>
                <th>银</th>
                <th>铜</th>
                <th>总计</th>
            </tr>
        </thead>
       <tbody>
           <tr>
               <td>1</td>
               <td>中国</td>
               <td>15</td>
               <td>14</td>
               <td>13</td>
               <td>12</td>
           </tr>
           <tr>
               <td>2</td>
               <td>德国</td>
               <td>14</td>
               <td>13</td>
               <td>10</td>
               <td>8</td>
           </tr>
           <tr>
               <td>3</td>
               <td>美国</td>
               <td>14</td>
               <td>13</td>
               <td>11</td>
               <td>12</td>
           </tr>
           <tr>
               <td>4</td>
               <td>中国</td>
               <td>14</td>
               <td>13</td>
               <td>11</td>
               <td>12</td>
           </tr>
       </tbody>


    </table>

</body>
</html>