物語をエンコードするHTML tableタグ(2)

20849 ワード
html テキストリンク
こんにちは.私は燦児です.
この記事では、前回のEartableでの他のタグについて説明します!
Excelでもパワーポイントでもハングルでも、表を作るときによく使う機能があります.
これが「セルのマージ」です.
表のレイアウトやデザインでは、セルをマージする必要があります.
では、HTMLの表はどのようにセルをマージしますか?
次のコードを見てください.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>talbe02</title>
</head>
<body>
    <!-- 기본 테이블 -->
    <table border="1">
        <tr>
            <td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td>
        </tr>
        <tr>
            <td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td>
        </tr>
    </table>
    <br/>
    <!-- colspan -->
    <table border="1">
        <tr>
            <td colspan="4">1-1 ~ 1-4</td>
        </tr>
        <tr>
            <td colspan="2">2-1 ~ 2-2</td><td>2-3</td><td>2-4</td>
        </tr>
        <tr>
            <td>3-1</td><td>3-2</td><td colspan="2">3-3 ~ 3-4</td>
        </tr>
    </table>
    <br/>
    <!-- rowspan -->
    <table border="1">
        <tr>
            <td rowspan="3">1-1<br/>2-1<br/>3-1<br/></td>
            <td>1-2</td><td>1-3
            <td rowspan="2">1-4<br/>2-4<br/></td>
        </tr>
        <tr>
            <td>2-2</td>
            <td rowspan="2">2-3<br/>3-3</td>
        </tr>
        <tr>
            <td>3-2</td><td>3-4</td>
        </tr>
    </table>
</body>
</html>
HTMLでは、colspanタグとrowspanタグを使用して列と行をマージできます.
カラムをcolspanに、ローをrowspanにマージします.
コードをよくチェックして、
<td colspan="4">1-1 ~ 1-4</td>
上のコードは、横に4つのグリッドを結合し、コンテンツに1-1-4と入力します.
  <td rowspan="3">1-1<br/>2-1<br/>3-1<br/></td>
上記のコードは、垂直に3つのグリッドを結合し、コンテンツに1-1,2-1,3-1をそれぞれ入力することを示しています.
上の完全なコードには3つのテーブルが入力されています.
では、コード出力時に表示される表を見てみましょう.

上の図に示すように、1枚目の表は基本表で、
2番目のテーブルは、横に結合されたcolspanテーブルです.
3番目のテーブルは、縦に結合されたrowspanテーブルです.
また、フォームをマージすることで、Webサイト内のレイアウトを設計することもできます.
これはあまりにも深化した過程で、後で見ましょう.
長いコメントありがとうございます次は別の文章を持ってきます.:)
SpringBoot+Vue配合ドメイン間スキーム
OpenSSLコマンド---speed