フォームテーブルを使用します

フォームテーブル

今、実質的に共通のラベルは、表示表形式のデータを処理し、レイアウトテーブル業界の先端に数年前に使用されるフォーム。ページがDIV + CSSページのレイアウトを可能にするための標準化をもたらすために持っていた今年ので、自分のBaiduの上で主要な復興流血、興味のある学生を引き起こしました。

表を作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
</head>
<body>
    <!-- 跟无序列表一样，table里面只能嵌套tr标签 -->
    <!-- table的属性有：边框-border 单元格与边框的间隙-cellspacing  单元格内容的间隙-cellpading  单元格宽度-width  单元格高度-height  水平对齐方式-align:left center right -->
    <!-- cellspacing 单元格与边框的距离   cellpading 内容与单元格之间的距离 -->
    <!-- 一般三参为：0  border  cellspacing  cellpading -->
    <table width="1000px" align="center" border="1px" cellspacing="0" cellpading="0" height="300px">
        <tr align="center">
            <td>姓名</td>
            <td>性别</td>
            <td>工资</td>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>男</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

ここに画像を挿入説明
1.tableフォームを定義するために使用されます。

テーブル内の行を定義するために使用2.trは、テーブル内のTRいくつかのペアを含む、タグテーブルにネストされなければならない、テーブルの複数の行があります。

3.td：セル定義テーブル、TRタグは対にネストされなければならないいくつかのペアを含むTR TD、それは行の列数（またはセルの数）を意味します。
ここに画像を挿入説明

ヘッダータグ

通常、テーブルのヘッダのセルまたは太字のテキストを中心とする最初の行の最初の列に、以下に示すように、テーブルヘッダーが設けられています。セットヘッダは、細胞ラベルTDに対応するによって置換番目ヘッダタグと同じくらい簡単です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表头标签</title>
</head>
<body>
    <!-- 表格标题一般用caption标签定义，体现出是一个整体 -->
    <!-- 一般表头用th取代td标签，表头内容自动加黑变粗居中 -->
    <table width="1000" align="center" border="0" cellspacing="0" cellpading="0" >
        <caption>我是表格标题</caption>
        <tr align="center">
            <th>姓名</th>
            <th>性别</th>
            <th>工资</th>
        </tr>
        <tr align="center">
            <td>小红</td>
            <td>女</td>
            <td>500</td>
        </tr>
        <tr align="center">
            <td>小明</td>
            <td>男</td>
            <td>500</td>
        </tr>
    </table>
</body>
</html>

ここに画像を挿入説明
キャプションラベルは、すぐにテーブルタグの後になければなりません。
唯一のテーブルの内部があります。

セルの結合

銀行間の合併：ROWSPAN列にわたってマージ：COLSPANを

細胞のアイデアをマージ：

合併のより多くのコンテンツの時間は、それを削除し、余分なものがあるでしょう。例えば、一つに合わせた3つのTdが、それは2つの冗長になり、必要性が除去されます。

式：削除=マージ数の数--1

第1の左及び右後方の合成一次

最初の列またはマージを越えインターバンクを決定
最初の左と右の最初のダウンの標的細胞を探します
削除削除セルの数=組み合わせの数--1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>
    <!-- 合并单元格  跨行合并：rowspan   跨列合并：colspan -->
    <table width="500" border="1" cellspacing="1" cellpadding="1" >
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>工资</td>
            <td>部门</td>
            <td>特殊说明</td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>3500</td>
            <td>设计</td>
            <td rowspan="2">rowspan</td>
        </tr>        
        <tr>
            <td>小红</td>
            <td>女</td>
            <td>3000</td>
            <td>后端</td>
        </tr>
    </table>
    <table width="500" border="1" cellspacing="1" cellpading="1" >
        <tr>
            <td>小红</td>
            <td>小明</td>
            <td>小王</td>
        </tr>
        <tr>
            <td colspan="3">colspan</td>
        </tr>
    </table>    
</body>
</html>

ここに画像を挿入説明
現在一般的に使用されていないされていないか、または基本にしても何らアクセスするので、私たちはより良いレイアウトを持って、テーブルには、学習の形として理解しました。

陳幸せな私

公開された23元の記事・ウォンの賞賛0 ・ビュー194

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