リストや表

JavaScript/HTML/CSS HTML

ul,olタグ

unordered list(アンオーダード・リスト)の略、リスト

ul>li*6

と入力しTabキーでリストのテンプレートができる(数字は必要なリスト数を入力)

<ul>
  <li>h タグ</li>
  <li>p タグ</li>
  <li>a タグ</li>
  <li>img タグ</li>
  <li>ul タグ</li>
  <li>table タグ</li>
</ul>

すると

  • h タグ
  • p タグ
  • a タグ
  • img タグ
  • ul タグ
  • tableタグ

上記のようなリストができる

ulをolに変えると

  1. hタグ
  2. pタグ
  3. aタグ
  4. imgタグ
  5. ulタグ
  6. tableタグ

と番号付きのリストができる

tableタグ

table(テーブル)、表

table>(tr>th2)+(tr>td2)*6

と入力しTabキー押下で表のテンプレートができる

trは表の1行を表しthは表の見出しをtdは表の中身を表している

<table>
  <tr>
    <th>タグ名</th>
    <th>意味</th>
  </tr>
  <tr>
    <td>h</td>
    <td>見出し</td>
  </tr>
  <tr>
    <td>p</td>
    <td>段落</td>
  </tr>
  <tr>
    <td>a</td>
    <td>リンク</td>
  </tr>
  <tr>
    <td>img</td>
    <td>画像</td>
  </tr>

下記のような表になる

タグ名 意味
h 見出し
p 段落
a リンク
img 画像

td、thタグで使える属性

属性 説明
colspan 列(横)の連結
rowspan 行(縦)の連結