Webプログラミング（フロントエンド）テスト - テーブルデザイン

（1）、ボーダーとテーブルの定義、内容の表は、プロの情報に3つのコースをベースとしている、列ラベルが含まれます：コース名、インストラクター、クレジット、理論の授業時間、実験的な授業時間、授業の成績を、使用している間CSS制御指定されたセルの間隔とセルのパディング。
（2）、ウェブフォームに対応する次の表XLSに従って設計。
注：①テーブル内のテキストの整列、CSS制御を使用して：②次の図と一致する可能として線を形成するように制御されます。
ここに画像を挿入説明
レンダリングを実行します：

某房地产信息中心第（7）期报价数据

引用日：2007年7月10日

引用データの市の不動産情報センター（7）

			この問題		上期
分類	製品名	ユニット	最高入札	一元化取引価格	最高入札	一元化取引価格
商業ビル	City Center地区	元/平方メートル	10846	9750	12475	11000
	ロットの都市	元/平方メートル	7416	6900	7749	6900
	市郊外のロット	元/平方メートル	7819	6700	7166	6550
オフィス	ハイグレードオフィスビル	元/平方メートル	23594	20200	23628	19250
オフィス	オフィス	元/平方メートル	20202	15650	18000	15500

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>某房地产信息中心第（7）期报价数据</title>
    <style type="text/css">
        table{
            border-collapse: collapse;
            table-layout: fixed;
            empty-cells: show;
            margin: 0 auto;}
        table,td,th{border: 2px solid black;
            text-align: center;}
        th{ padding: 0 1em 0;}
        p.warning{
            text-align: center;}
        div{height: 100px;
            width: 700px;}
        .right1{text-align: right;}
        .left1{text-align: left;}
    </style>
</head>
<body>
<div>
    <p>报价日期：2007年7月10日</p>
    <p class="warning">某城市房地产信息中心第（7）期报价数据</p>
    <table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th colspan="2">本期</th>
            <th colspan="2">上期</th>
        </tr>
        <tr>
            <th>分类</th>
            <th>商品名称</th>
            <th>单位</th>
            <th>最高成交价</th>
            <th>集中成交价</th>
            <th>最高成交价</th>
            <th>集中成交价</th>
        </tr>
        <tr>
            <td rowspan="3">商品楼</td>
            <td class="left1">城市中心地段</td>
            <td>元/平方米</td>
            <td class="right1">10846 </td>
            <td class="right1">9750 </td>
            <td class="right1">12475 </td>
            <td class="right1">11000 </td>
        </tr>
        <tr>
            <td class="left1">城市一般地段</td>
            <td>元/平方米</td>
            <td class="right1">7416 </td>
            <td class="right1">6900 </td>
            <td class="right1">7749 </td>
            <td class="right1">6900 </td>
        </tr>
        <tr>
            <td class="left1">城近郊区地段</td>
            <td>元/平方米</td>
            <td class="right1">7819 </td>
            <td class="right1">6700 </td>
            <td class="right1">7166 </td>
            <td class="right1">6550 </td>
        </tr>
        <tr>
            <td rowspan="2">写字楼</td>
            <td class="left1">高档写字楼</td>
            <td>元/平方米</td>
            <td class="right1">23594 </td>
            <td class="right1">20200 </td>
            <td class="right1">23628 </td>
            <td class="right1">19250 </td>
        </tr>
        <tr>
            <td class="left1">写字楼</td>
            <td>元/平方米</td>
            <td class="right1">20202 </td>
            <td class="right1">15650 </td>
            <td class="right1">18000 </td>
            <td class="right1">15500 </td>
        </tr>
    </table>
</div>
</body>
</html>
```java

偶然にも、私はしません

公開された28元の記事・ウォンの賞賛5 ・ビュー5783

プライベートの手紙の懸念

Webプログラミング（フロントエンド）テスト - テーブルデザイン

おすすめ