ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML テーブルとリスト_html/css_WEB-ITnose

HTML テーブルとリスト_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:50:571216ブラウズ

HTML テーブル

テーブルは実際には多数の小さなセルであり、これらの小さなセルは非常に整然と配置されており、多くの行と多くの列があります。このように多くの行と列で構成されるものをテーブルと呼び、テーブルは f5d188ed2c074f8b944552db028f98a1 タグで定義されます。 f5d188ed2c074f8b944552db028f98a1 タグ内の行は a34de1251f0d9fe1e645927f19a896e8 タグであり、列を定義する前に行を定義する必要があります。 html では各列が行になっているためです。

次の表は、一般的に使用されるタグをいくつかまとめたものです。

テーブルのタイトルを定義しますテーブルのセルを定義しますテーブルヘッダーを定義しますテーブルの本体を定義しますテーブルのフッターを定義しますを定義するtable の列プロパティまず簡単なテーブルを定義します。上記のコメントの下に b6c5a531a458a2e790c1fd6421739d1c と a34de1251f0d9fe1e645927f19a896e8 が書かれているのがわかります。。非常に小さな表が表示されますが、a34de1251f0d9fe1e645927f19a896e8 に書かれたテキストは表示されません境界線のないテーブル

	ef914ec7a7df30f7c9e51a2b96136f80

	92cee25da80fac49f6fb6eec5fd2c22a
	06669983c3badb677f993a8c29d18845
	581cdb59a307ca5d1e365becba940e05

<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <td>水果</td> <td>水果</td> <td>水果</td> </tr> <!-- 下面将td与tr反正写了，是不会构成表的 --> <td> <tr>asd</tr> <tr>asd</tr> <tr>asd</tr> <tr>asd</tr> </td> </table> </body></html>
そのため、HTML では表を 1 行ずつ記述する必要があります。 a34de1251f0d9fe1e645927f19a896e8 タグには b6c5a531a458a2e790c1fd6421739d1c が含まれています

境界線のないテーブルは実際には、border 属性を追加せずに

タグ内にあります。 border 属性はテーブルの境界線を表します。属性を追加しない場合はデフォルトの border="0" が使用されますが、枠線がないとテーブルであることが分からない場合があります。そのため、border="1px" に 1 ピクセルの境界線が設定される場合があります。一時的に枠線属性を削除して、枠線のないテーブルを完成させます

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <table>            <tr>                <td>呵呵</td>                <td>哈哈</td>                <td>嘻嘻</td>            </tr>            <tr>                <td>嘿嘿</td>                <td>嘎嘎</td>                <td>噗噗</td>            </tr>            <tr>                <td>啊啊</td>                <td>哦哦</td>                <td>噢噢</td>            </tr>        </table>    </body></html>

テーブルのヘッダーa34de1251f0d9fe1e645927f19a896e8b4d429308760b6c2d20d6300079ed38eI am the header01c3ce868d2b3d9bce8da5c1b7e41e5b b4d429308760b6c2d20d6300079ed38e タグを使用して、テーブルにヘッダーを追加することもできます。

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <table border="1">            <tr>                <th>人物</th>                <th>介绍</th>                <th>产品</th>            </tr>            <tr>                <td>史蒂夫&middot;保罗&middot;乔布斯</td>                <td>苹果CEO</td>                <td>Apple系列</td>            </tr>            <tr>                <td>丹尼斯&middot;里奇</td>                <td>C语言之父</td>                <td>C语言</td>            </tr>            <tr>                <td>比尔&middot;盖茨</td>                <td>微软CEO</td>                <td>Windows系统</td>            </tr>        </table>    </body></html>

のように、b4d429308760b6c2d20d6300079ed38e タグも追加します。

テーブル内に cellpadding 属性を設定することもできます

cellpacing 属性も設定することもできます

<table border="1" cellpadding="10" cellspacing="10">    <tr>        <td>xxx</td>    </tr></table>

title63bd76834ec05ac1f4c0ebbeaafb0994 付きのテーブル

<table border="1" cellpadding="10" cellspacing="10">            <caption>xxx表</caption>            <tr>                <td>xxx</td>            </tr></table>

の color bgcolor 属性テーブル

<table border="1" bgcolor="red">    <tr>        <td>xxx</td>    </tr></table>

セルの内容を配置するための align 属性には、それぞれ center、left、right があります

<table border="1" align="center">    <caption>xxx表</caption>    <tr>        <td>xxx</td>    </tr></table>

正確には、セルを結合することです

<table border="1">    <caption>xxx表</caption>    <tr>        <td colspan="2">xxx</td>        <td>xxx</td>    </tr>    <tr>        <td>xxx</td>        <td>xxx</td>        <td>xxx</td>    </tr></table>

。

HTML リスト

リストは Word のタイトルと同じように、カウントダウンされます。

下付き文字はタイトルを制御するタグです

tag

description

c34106e0b4e09414b63b2ea253ff83d6

順序付きリスト

ff6d136ddc5fdfeffaf53ff6ee95f185

順序なしリスト

10dfba80e82596dab34930305e1f0ec5リスト73de882deff7a050a357292d0a1fca94リストアイテム67bc4f89d416b0b8236eaa5f43dee742

这些列表还分有序列表，无序列表和自定义列表。

无序列表

ff6d136ddc5fdfeffaf53ff6ee95f185、25edfb22a4f469ecb59f1190150159c6

属性：disc：实体圆、circle：空心圆、square：实体方块

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>    <!-- 无序列表默认属性是disc，disc定义一个实体圆，所以disc不用刻意去设置 -->        <ul>            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ul>    <!-- 这些属性都是通过type来定义的，circle是定义一个空心圆 -->        <ul type="circle">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ul>    <!-- square定义实体方块 -->        <ul type="square">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ul>    </body></html>

有序列表

c34106e0b4e09414b63b2ea253ff83d6、25edfb22a4f469ecb59f1190150159c6

属性：A、a、l、i、start

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>    <!-- 有序列表默认是数字往下计数的 -->        <ol>            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- 定义A，就是按照大写字母来计数的，当然了，不能直接定义B，它不是不会从B开始数的 -->        <ol type="A">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- 定义a，就是安装小写字母开始计数的 -->        <ol type="a">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- 定义I，就是按照大写罗马数字计数的 -->        <ol type="I">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- 定义i，就是按照大写罗马数字计数的 -->        <ol type="i">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    <!-- start属性，就是按照从多少数来计数，比如我想从3开始计数。start属性只能定义数字，不支持英文字母哦。 -->        <ol start="3">            <li>我是第一个</li>            <li>我是第二个</li>            <li>我是第三个</li>        </ol>    </body></html>

嵌套列表

ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、25edfb22a4f469ecb59f1190150159c6

嵌套列表就是有序列表套无序列表，无序套有序的呗。

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <ol>            <li>人物</li>            <ul>                <li>斯蒂芬&middot;保罗&middot;乔布斯</li>                <li>丹尼斯&middot;里奇</li>                <li>比尔&middot;盖茨</li>            </ul>                        <li>动物</li>            <ul>                <li>猫</li>                <li>狗</li>                <li>熊</li>            </ul>        </ol>                </body></html>

自定义列表

5c69336ffbc20d23018e48b396cdd57a、73de882deff7a050a357292d0a1fca94、67bc4f89d416b0b8236eaa5f43dee742

自定义的列表，就是没有有序、无序的点。后期可以用CSS样式来加工修改。也是比较常用的操作

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <dl>            <li>我是标题</li>            <dt>                <dd>我是正文，我必须长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</dd>            </dt>        </dl>                </body></html>



	説明

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS の特異性CSS プロパティ、重み、優先度 - CSS の特異性ルール、_html/css_WEB-ITnose次の記事：CSS の特異性CSS プロパティ、重み、優先度 - CSS の特異性ルール、_html/css_WEB-ITnose

続きを見る

HTML テーブルとリスト_html/css_WEB-ITnose

HTML テーブル

関連記事