HTML1-6. 표 만들기 table 1 -[HTML 표 만들기, HTML th 태그로 행이나 열에 제목 생성, caption & figcaption 사용 방법]

1. 표 만들기

기본 형식은 아래와 같습니다. 

 

<table>

      <tr>

      <td> 내용 </td>

     </tr>

</table>

 

<tr> </tr> 하나의 열이 생성됩니다. tr 태그 내에 td 태그를 내용을 입력하면 하나의 행이 생성된다고 보시면 됩니다.

Ex )  2열 3행 구조 =  <table> <tr>  내에  td /td td /td td /td /tr    , td /td td /td td /td /tr  반복됩니다. 

 

아래의 소스나 행과 열에 입력할 데이터를 가상으로 만드셔서 진행해 보시길 바랍니다. 

border와 margin 속성은 나중에 배우게 되므로, <table> 태그를 생성하셔두 상관은 없습니다. 

    <table border="2" margin="1">

        <tr>

            <th> 가전제품 </th>

            <td>에어콘</td>

            <td>선풍기</td>

            <td>냉장고</td>

            <td>에어프라이기</td>

        </tr>

        <tr>

            <th>컴퓨터용품</th>

            <td>SSD</td>        

            <td>CPU</td>

            <td>MainBoard</td>

         </tr>

    </table>

1-1. <th> 표 제목 생성하기

: table head에 테이블에 대한 제목을 입력하실 수 있습니다. 

위의 생성된 예제에서 해당 컬럼에 대한 제목을 입력했습니다. 

 

테이블의 데이터 구조에서 따라 행으로 데이터 입력하거나 열로 데이터를 입력하느냐에 따라 

th 삽입되는 위치가 달라지게 될 것입니다.  

 

3행 4열의 테이블 입니다.  이번의 표 제목에 대한 3행으로  이루어져 있습니다. 

    <table border="1">

        <caption>

            <strong>Modern Browser</strong>

            <p>국내에서 자주 사용하는 모던 브라우저</p>

        </caption>

        <tr>

            <th>브라우저</th>

            <th>제조업체</th>

            <th>다운로드</th>

        </tr>

        <tr>

            <th>크롬</th>

            <th>goggle</th>

            <th>https://www.google.com/chrome</th>

        </tr>

       

        <tr>

            <th>파이어폭스</th>

            <th>mozlia</th>

            <th>https://www.mozlia.org.ko/firefox</th>

        </tr>

        <tr>

            <th>엣지</th>

            <th>microsoft</th>

            <th>https://www.microsoft.comm/ko-kr/microsoft-edge</th>

        </tr>

 

 

1-2. caption  표에 제목 지정하기 

: caption 태그를 사용하면 표 위 센터에 표시됩니다. <caption>태그를 이용하면 제목을 여러 줄로 표시하거나 

텍스트를 스타일 꾸밀 수 있습니다. 

 

    <table border="1">

        <caption>

            <strong>Modern Browser</strong>

            <p> <u>국내에서</u> <mark>자주 사용하는  브라우저</mark>라고 생각했지만

            <span style= "color:rgb(46, 190, 101)";> 아닐 수도 있는 브라우저</span></p>

        </caption>

 

위와 같이 caption 태그를 사용해서 태그들을 꾸밀 수 있습니다. span 태그와 스타일에 대해서는 앞으로 포스팅 할 예정입니다. 

 

1-3. caption  vs figcaption 

: figcaption은 <figure> <figcaption> </figcaption> </figure>  figure 태그로 감싼 후  그 안에 figcaption 태그를 이용해

제목 및 설명 입력해서 사용합니다.  caption 태그와 달리 중앙 정렬되지 않고  <table> 앞에 지정하면 표 위에 표시됩니다. </table> 닫은 후 사용하면 표 아래에 제목이 표시되는 점이 다릅니다. 

 

만약 테이블에 안에서 지정하면 중앙 배치됩니다.  정렬하고 싶지 않는 경우 사용하시되 사용하기 위해서는 <table>위나

</table> 아래에 태그를 작성해야 하며 </figure> 태그 

 

<figure>

    <figcaption>

        <p> <u>국내에서</u> <mark>자주 사용하는  브라우저</mark>라고 생각했지만

        <span style= "color:rgb(46, 190, 101)";> 아닐 수도 있는 브라우저</span></p>

    </figcaption>

   

    <table border="1">

        <tr>

            <th>브라우저</th>

            <th>제조업체</th>

            <th>다운로드</th>

        </tr>

        <tr>

            <th>크롬</th>

            <th>goggle</th>

            <th>https://www.google.com/chrome</th>

        </tr>

       

        <tr>

            <th>파이어폭스</th>

            <th>mozlia</th>

            <th>https://www.mozlia.org.ko/firefox</th>

        </tr>

        <tr>

            <th>엣지</th>

            <th>microsoft</th>

            <th>https://www.microsoft.comm/ko-kr/microsoft-edge</th>

        </tr>

    </table>    

 

---

</table> 태그가 끝난 뒤에 붙이면 표의 제목의 위치가 아래에 생성됩니다. 

 

 

아래는 figure 태그를 </table> 붙여서 제목을 아래에 붙여 보았씁니다. 

 

figure 태그를