リストと表形式の表示に使用するタグ


①リスト(List)


リストタグは、ナビゲーションメニュー(反応メニュー)の作成によく使用されます.

0.liラベル


ListItemの略で、ulタグとolタグの内部で使用されるタグです.
は、リスト内のコンテンツの実際のタグです.
インデントと改行機能があり、typeプロパティとして異なる記号を使用できます.

1.ulラベル


無秩序リストの略で、無秩序リストを表します.
<ul type="square">
  <li>coffee</li> // ■ coffee
  <li>Tea</li> // ■ Tea
  <li>Milk</li> // ■ Milk (로 표현됨)
</ul>
ulラベルとliラベルのtypeプロパティ
  • disc:●(デフォルト)
  • circle : ○
  • square : ■
  • 2.olラベル


    Ordered Listの略で、順番のあるリストです.
    <ol start="3"> // start 속성을 통해 리스트의 시작값을 정할 수 있다.
      <li>coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    <ol Type="a"> // type 속성을 사용해 순서를 나타내는 문자를 지정할 수 있다.
      <li value="3">coffee</li> // c. coffee
      <li value="5">Tea</li> // e. Tea
      <li>Milk</li> // f. Milk (로 표현됨)
    </ol>
    olラベルのtype属性
  • 「1」:数値(デフォルト)
  • 「A」:大文字
  • 「a」:小文字
  • 「I」:大文字ローマ数字
  • 「i」:小文字ローマ数字
  • <ol reversed> // 순서를 역으로 표현
      <li>coffee</li> 
      <li>Tea</li>
      <li>Milk</li>
    </ol>

    3.ネストされたリスト

    <ul>
      <li>coffee
        <ol>
          <li>아메리카노</li>
          <li>바닐라 라떼</li>
        </ol>
      </li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

    ②テーブル


    タブを作成するときに使用するラベル.主にdivラベルを使用してレイアウトを整理します.
  • table:小包表のラベル
  • tr(tablerow):表の行
  • th(tableheading):行内見出しセル
  • td(tabledata):行の通常セル
  • 表タグのプロパティ
  • border:表の枠線の厚さを指定します.(CSS border propertyの方が良い)
  • rowspan:セルが占有する行数を指定し
  • colspan:指定ユニットが占有する列数
  • 任意の表の例

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <table border = "1">
          <th>주제</th>
          <th>속성</th>
          <th>비고</th>
          <tr align="center">
            <td rowspan="8">테이블 디자인 변경</td>
            <td>border</td>
            <td>테이블의 테두리</td>
          </tr>
          <tr align="center">
            <td>bordercolor</td>
            <td>테이블의 테두리 색상</td>
          </tr>
          <tr align="center">
            <td>width</td>
            <td>테이블의 가로 크기</td>
          </tr>
          <tr align="center">
            <td>height</td>
            <td>테이블의 세로 크기</td>
          </tr>
          <tr align="center">
            <td>align</td>
            <td>정렬</td>
          </tr>
          <tr align="center">
            <td>bgcolor</td>
            <td>배경색</td>
          </tr>
          <tr align="center">
            <td>colspan</td>
            <td>가로 합병 (열 합병)</td>
          </tr>
          <tr align="center">
            <td>rowspan</td>
            <td>세로 합병 (행 합병)</td>
          </tr>
        </table>
      </body>
    </html>

    🎁 リファレンスとソース

  • https://poiemaweb.com/html5-tag-list-table
  • https://cofs.tistory.com/124
  • https://coding-factory.tistory.com/184