HTML 表格

表格由 <table> 标签来定义。

HTML 表格标签

<table>    定义表格
<th>    定义表格的表头
<tr>    定义表格的行
<td>    定义表格单元
<caption>    定义表格标题
<colgroup>    定义表格列的组
<col>    定义用于表格列的属性
<thead>    定义表格的页眉
<tbody>    定义表格的主体
<tfoot>    定义表格的页脚

实例

表格

<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>

带表头表格

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <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>

带样式表格

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>带样式表格</title>
<head>
    <style type="text/css">
        table {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table tr {
            background-color: #ffffff;
        }
        table tr:hover{
            background-color:#CCCCCC;
        }
        table td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
        }

    </style>
</head>
<body>
<!-- Table goes in the document BODY -->
<table style="margin:auto">
    <tr>
        <th>信息标题 1</th><th>信息标题 2</th><th>信息标题 3</th>
    </tr>
    <tr>
        <td>文本 1A</td><td>文本 1B</td><td>文本 1C</td>
    </tr>
    <tr>
        <td>文本 2A</td><td>文本 2B</td><td>文本 2C</td>
    </tr>
</table>
</body>
</html>
posted @ 2021-06-21 08:06  胡勇健  阅读(105)  评论(0)    收藏  举报