Zenn
🦔

【初心者向け/ITスクール35日】HTMLのタグとテーブルについて

2023/08/29に公開
HTML
tech

はじめに

今日は、ITスクールに通った35日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

35日目は、HTMLについて勉強しました。以前、勉強した内容があるので、URLをこちらに添付します。

HTML基礎1
HTML基礎2
HTML基礎3
Sementic HTML

MORE TAG

<marguee>:文字が左に動く不思議なタグでした。実務ではあまり使わないようですが、ニコニコ動画で使うタグだと思います。

<body>
   <marquee>2023년 8월 29일</marquee>
   <marquee>HTML 시작 !</marquee>
   <marquee>ORAORAORAORAORAORAORAORAORAORA!</marquee>
   <marquee>MUDAMUDAMUDAMUDAMUDAMUDAMUDAMUDA!</marquee>
</body>

<hr> : brの後、線を引くタグです。

your place<hr>
my place

&nbsp :空白文字です。

S P  A   C    E<br>
S&nbsp;P&nbsp;&nbsp;A&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;E


a &lt; 10<br>  <!-- a<10 -->
b &gt; 20<hr>  <!-- b>20 -->

昔は投稿はこういうふうに表現したようです。

<video>,<audio>

<img src="../photo.jpg" width=500px /><hr>
<video src="../opening3.mp4" controls="controls" width=500px></video><hr>
<audio src="../Eve.mp3" controls="controls"></audio><hr>

<img>と異なり、普通の要素です。つまり、attributeだけなく、閉めるタグも必要です。controls="controls" というattributeが必須です。

TABLE

<table>: テーブルの親タグです。
<tr>: テーブルの行を表す要素で、テーブル内の行を表します。
<td>: テーブルデータを示す要素で、テーブル内のデータやセルを意味します。
defaultはalign:left valign:middlerです。
<th>: テーブルの見出しセルを表す要素で、テーブル内の見出しを表します。

1つのテーブル内では、<tr> タグを使用して各行を表し、各<td> を使って
データを示します。

属性: border、width、height（テーブル）
整列：align、valign（セル内での配置方法）
合併：colspan(横）、rowspan（縦）➡　合併されたセルは重複になるので、一個は消します。

<!DOCTYPE html>
<html>
<head>
<style>

  table{
    border-color:red;
    border-style:solid;
    border-collapse :collapse; 
    border-spacing :0;
  }
  td{
   color:blue;
  }
  #table2 td{
    text-align:center;
  }
  #table3{
    border-color:blue;
  }
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 
    NO.1 	 
   <table border="2" width="300px" height="300px" color:red;>
      <tr>
        <td align="center">ㄱ</td>
        <td valign="top" align="center">ㄹ</td>
      </tr>
      <tr>
        <td valign="top" align="center">ㄴ</td>
        <td valign="bottom" align="center">ㅁ</td>
      </tr>
       <tr>
        <td valign="top" align="right">ㄷ</td>
        <td valign="bottom">ㅂ</td>
      </tr>
    </table><br>
    
   NO.2
   <table id="table2" border="2" width="300px" height="300px">
      <tr>
        <td colspan="2">1</td>
        <td rowspan="2">2</td> 
      </tr>
      <tr>
        <td rowspan="2">3</td>
        <td >4</td>
      </tr>
       <tr>
        <td colspan="2" >5</td>
      </tr>
    </table><br>
	 
	NO.3 
   <table border="2" width="300px" height="300px">
      <tr>
        <td colspan="2"></td>
        <td rowspan="2"></td> 
      </tr>
      <tr>
        <td rowspan="2"></td>
        <td align="center">
        <table id="table3" border="2" width="90%" height="90%"> 
     		 <tr>
     			 <td></td>
      			<td></td>
      		</tr>
            <tr>
      			<td></td>
   			   <td></td>
     	   </tr>
    		 </table>
        </td>
      </tr>
       <tr>
        <td colspan="2" ></td>
      </tr>
    </table>
    

</body>
</html>

Discussion