HTML 03デフォルト要素-リストと表

33861 ワード
html table html list html テキストリンク

6.リスト（list）


①無秩序リスト

  • < ul > ~ < /ul >:無秩序リスト
  • < li > ~ < /li >:ulラベルの各リスト要素.
  • 各リスト要素の前には、黒い小さな円の位置
    • にあるデフォルトタグ(marker)があります.
  • CSSのlist-style-typeプロパティを使用する場合は、リスト要素の前のタグを別のシェイプに変更できます.
    -dick:黒い小さな円(デフォルト)
    -円形:白い小さな円
    -square:方形
    • 	<p>검정색 사각형 모양</p>
	<ul style="list-style-type: square">
		<li>감자</li>
		<li>상추</li>
		<li>고구마</li>
	</ul>

    ②順序付きリスト（Ordered List）

  • < ol > ~ < /ol >:秩序リスト
  • 各リスト要素に
  • ラベル
  • 各リスト要素の前にデフォルトのアラビア数字タグ
    • があります.
  • CSSのlist-style-typeプロパティを使用すると、リスト要素の前のタグを変更できます.
    -decimal:数値(デフォルト)
    -uper-alpha:英語大文字
    -low-alpha:英語小文字
    -uper-roman:ローマ数字大文字
    -lower-roman:ローマ数字小文字
    • <p>영어 소문자</p>
    <ol style="list-style-type: lower-alpha">
	<li>감자</li>
	<li>상추</li>
	<li>고구마</li>
    </ol>

    ③定義リスト（定義リスト）

  • < dl > ~ < /dl >:このラベルから
  • < dt > ~ < /dt >:用語名
  • < dd > ~ < /dd >:用語定義
    • <dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>

    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

    7.テーブル


    ①テーブルの作成

    <body>

	<h1>테이블 만들기 연습</h1>
	<table style="width:100%">
		<tr style="background-color:lightgrey">
			<th>색깔</th>
			<th>English</th>		
			<th>숫자</th>
		</tr>
		<tr>
			<td>빨강</td>
			<td>red</td>		
			<td>1</td>
		</tr>
		<tr>
			<td>파랑</td>
			<td>blue</td>		
			<td>2</td>
		</tr>
	</table>

</body>
  • < table > ~ < /table >:このラベルを開く
  • < tr > ~ < /tr >:タグ区分表の列
  • < th > ~ < /th >:タグは各列のタイトルを表し、すべての内容は自動的に太字に整列します
  • < td > ~ < /td >:タグは表の列をセルごとに分割します

    • ②テーブルボーダー

  • CSSのborderプロパティにより、表の枠線が表示されます
  • border属性値が指定されていない場合、デフォルト値は空白ボックス
    • <style>

    table, th, td { border: 1px solid black }

</style>
  • ただし、ここには2本の枠線があります.table,th,tdの3つのタグにはそれぞれ独自のタグがあるため
  • 属性border-collapseを使用して枠線を1行に設定
    border-折りたたみ属性値を折りたたみに設定
    • <style>

    table, th, td { border: 1px solid black; 
    border-collapse: collapse }

</style>

    ③連結表列

  • colspan = "숫자":数値が連結する列の個数
  • マージするカラムのタグを削除する必要があります
    (=同じtrタグ内にあるtdタグ)
    • <body>

	<h1>테이블 열 합치기</h1>
	<table style="width:100%">
		<tr style="background-color:lightgrey">
			<th colspan = "3">색깔</th>
			
		</tr>
		<tr>
			<td>빨강</td>
			<td>red</td>		
			<td>1</td>
		</tr>
		<tr>
			<td>파랑</td>
			<td colspan = "2">blue</td>		
			
		</tr>
	</table>

</body>

    ④表行の連結

  • rowspan = "숫자":数値が連結される行数
  • マージする行のタグを削除する必要があります
    (=他のtrタグのtdタグ)
    • <body>

	<h1>테이블 행 합치기</h1>
	<table style="width:100%">
		<tr style="background-color:lightgrey">
			<th rowspan = "3">색깔</th>
			<th>English</th>		
			<th>숫자</th>
		</tr>
		<tr>
			
			<td rowspan = "2">red</td>		
			<td>1</td>
		</tr>
		<tr>
			
					
			<td>2</td>
		</tr>
	</table>

</body>

    ⑤表の行と列の結合

    <h1>테이블의 열과 행 합치기</h1>
	<table style="width:100%">
      
		<tr>
			<td colspan="6">1</td>
		</tr>
      
      
		<tr>
			<td colspan="6">2</td>
		</tr>
      
      
		<tr>
			<td rowspan="3">3</td>
			<td rowspan="3">4</td>
			<td colspan="2">5</td>
			<td>6</td>
			<td>7</td>
		</tr>
      
      
		<tr>
			<td colspan="3">8</td>
			<td>9</td>
		</tr>
      
      
		<tr>
			<td colspan="4">10</td>
		</tr>
      
      
	</table>

    ✍🏼 このコードはもともと6*5でいいですか?

    ⑥表タイトルの設定

  • < caption > ~ < /caption >:テーブル上部のタイトルまたはフレーズ
    • <table style="width:100%">

    <caption>색깔 이름을 적어보겠습니다</caption>

    <tr>

        <td>빨강</td>

        <td>파랑</td>

        <td>노랑</td>    

    </tr>

</table>
    202002062025——『String関連』
    明日学习団11日制作チャレンジ3日目