リストとは箇条書きで情報を表現する手段です。リストは短い文字量でも、表現したい論旨を的確にわかり易く表現することが可能となります。
リストには順序ありのものととなしのリストがあります。

• <ul>～</ul> unorderd list タグ。
  このタグで囲まれた領域が順序なしリストであることを示しています。
  
  
• <ul>～</ul> orderd list タグ。
  このタグで囲まれた領域が順序ありリストであることを示しています。
  
  
• <li>～</li> list タグ。
  このタグで囲まれた領域がリストの一項目です。
  <ul> タグや次の項目の <ol> タグに囲まれた領域で使います。

順序なしリストには <ul>～</ul> タグと <li>～</li> タグを使います。

<h3>カレーの作り方</h3>
   <ul>
      <li>肉と野菜を炒める</li>
      <li>水を入れて中火で煮込む</li>
      <li>時々アクを取る</li>
      <li>カレールーを入れる</li>
      <li>とろみがつくまで弱火で煮込む</li>
   </ul>

<li>属性でマーカー記号を変えることもできます。

<ul>
  <li type="disc">リスト1</li>
  <li type="disc">リスト2</li>
  <li type="disc">リスト3</li>
</ul>

<ul>
  <li type="disc">リスト1</li>
  <li type="disc">リスト2</li>
  <li type="disc">リスト3</li>
</ul>

<ul>
  <li type="disc">リスト1</li>
  <li type="disc">リスト2</li>
  <li type="disc">リスト3</li>
</ul>

順序ありリストには <ol>～</ol> タグと <li>～</li> タグを使います。

<h3>カレーの作り方</h3>
   <ol>
      <li>肉と野菜を炒める</li>
      <li>水を入れて中火で煮込む</li>
      <li>時々アクを取る</li>
      <li>カレールーを入れる</li>
      <li>とろみがつくまで弱火で煮込む</li>
   </ol>

<li>属性でマーカー記号を変えることもできます。

<ol>
  <li type="1">リスト1</li>
  <li type="1">リスト2</li>
  <li type="1">リスト3</li>
</ol>

<ol>
  <li type="A">リスト1</li>
  <li type="A">リスト2</li>
  <li type="A">リスト3</li>
</ol>

<ol>
  <li type="a">リスト1</li>
  <li type="a">リスト2</li>
  <li type="a">リスト3</li>
</ol>

<ol>
  <li type="I">リスト1</li>
  <li type="I">リスト2</li>
  <li type="I">リスト3</li>
</ol>

<ol>
  <li>リスト1</li>
  <li value="3">リスト2</li>
  <li>リスト3</li>
</ol>

HTMLで行と列から成る「表」で情報を表現する際には「table」を使用します。

• <table>～</table>table タグ。
  このタグで囲まれた領域が表 (テーブル) であることを示しています。
  
  
• <tr>～</tr>table row タグ。
  このタグで囲まれた領域がテーブルの行 (row) になります。
  行 (row) は横1列のことです。
  
  
• <th>～</th>table header タグ。
  このタグで囲まれた領域がテーブルの見出しセルになります。
  
  
• <td>～</td>table data タグ。
  このタグで囲まれた領域がテーブルの内容セルになります。
  

表には<table>～</table> タグ、行は<tr>～</tr> タグ、見出しセルは <th>～<th>、行内のセルは<td>～<td> タグを使います。

<table border="1">
  <tr>
    <th>県名</th>
    <th>県庁所在地</th>
    <th>面積</th>
    <th>総人口</th>
  </tr>
  <tr>
    <td>東京都</td>
    <td>東京</td>
    <td>2,187.65km²</td>
    <td>13,044,818人</td>
  </tr>
  <tr>
    <td>千葉県</td>
    <td>千葉市</td>
    <td>5,156.60km²</td>
    <td>6,200,335人</td>
  </tr>
  <tr>
    <td>埼玉県</td>
    <td>さいたま市</td>
    <td>3,797.25km²</td>
    <td>7,189,176人</td>
  </tr>
</table>

colspan属性で列の結合、rowspan属性で行の結合が出来ます。

<table border="1">
    <tr>
        <td colspan="2">セル1</td>
    </tr>
    <tr>
        <td>セル2</td><td rowspan="2">セル3</td>
    </tr>
    <tr>
        <td>セル4</td>
    </tr>
</table>

border="数値"：外枠の太さを指定する。
bordercolor="色"：外枠の背景色を指定します。
bgcolor="色"：表全体の背景色を指定します。
rules="none"：内罫線を表示しない。

<table border="5" bordercolor= "purple" bgcolor="green" rules="none">
    <tr>
        <td>セル1</td><td>セル2</td>
    </tr>
    <tr bgcolor="red">
        <td>セル3</td><td>セル4</td>
    </tr>
    <tr>
        <td>セル5</td><td bgcolor="blue">セル6</td>
    </tr>
</table>

問題 [Ex3_1.html]
テーブルとリストを活用して、下記のページを作成してください。