민둥 개발자의 계발 블로그

HTML#4 테이블 만들기! 본문

Study/HTML

HTML#4 테이블 만들기!

민둥산의 민둥이 2022. 4. 12. 00:00

 안녕하세요! 오늘은 테이블 만들기 태그에 대해 알아보겠습니다. 우선 HTML 목록 만들기 정답부터 공개!

 

HTML#3 목록 태그 및 특수문자 정답!

<html>
 <head>
  <title>목록 만들기</title>
 </head>
 <body>
 
 <h1>목록 만들기</h1>
  목록 
  목록
  목록
 <hr>

 <h2>목록의 종류</h2>
  <ul>
  <li>순서 없는 목록 - &lt;ul&gt;</li>
  <li>순서 있는 목록 - &lt;ol&gt;</li>
  <li>정의 목록 - &lt;dl&gt; </li>
  </ul>
 
 <hr> 
 <h4>★☆특수 문자 태그들☆★ - <small>&amp;로 시작하고 ;로 끝남</small></h3>
  <ul>
   <li>결과 = 태그(명령) </li>
   <li>&lt; = &amp;lt;</li>
   <li>&gt; = &amp;gt;</li>
   <li>&nbsp; = &amp;nbsp;</li>
   <li>&amp; = &amp;amp;</li>
  </ul>

  <p>
  (ex) &lt;b&gt;<br>
       &lt;!-- 주석태그닷 --&gt;
  </p>

  <ul>
   <li>&copy; = &amp;copy;</li>
   <li>&trade; = &amp;trade;</li>
   <li>&reg; = &amp;reg;</li>
  </ul>

  <hr>
  
  <h3>1. ul - Unordered List(순서 없는 목록)</h3>
  <ul>
   <li>coffee</li>
   <li>tea</li>
   <li>milk</li>
   <li>water</li>
  </ul>

  <hr>
  <h3>2. ol- Ordered List (순서 있는 목록)</h3>
   <ol>
    <li> html</li>
    <li> css</li>
    <li> javascript</li>
   </ol>

  
   <ol>
    <li> red(0~255) </li>
    <li>green(0~255)</li>
    <li>blue(0~255)</li>
   </ol>

   
   <ol>
    <li>web</li>
    <li>java</li>
    <li>jsp</li>
    <li>netw</li>
    <li>db</li>
    <li>job</li>
   </ol>

  <h5>ol의 기본 모양 바꾸기 - type속성</h5>
  (1) type="1"
  <ol type="1">
    <li>web</li>
    <li>java</li>
    <li>jsp</li>
    <li>netw</li>
    <li>db</li>
    <li>job</li>
   </ol>

  (2) type="a"
   <ol type="a">
    <li>web</li>
    <li>java</li>
    <li>jsp</li>
    <li>netw</li>
    <li>db</li>
    <li>job</li>
   </ol>

  (3) type="A"
   <ol type="A">
    <li>web</li>
    <li>java</li>
    <li>jsp</li>
    <li>netw</li>
    <li>db</li>
    <li>job</li>
   </ol>

  (4) type="i"
   <ol type="i">
    <li>web</li>
    <li>java</li>
    <li>jsp</li>
    <li>netw</li>
    <li>db</li>
    <li>job</li>
   </ol>

  (5) type="I"
   <ol type="I">
    <li>web</li>
    <li>java</li>
    <li>jsp</li>
    <li>netw</li>
    <li>db</li>
    <li>job</li>
   </ol>

  <h5>ol의 시작 바꾸기 - start속성 (값은 숫자만 가능)</h5>
   <ol start="100">
    <li>web</li>
    <li>java</li>
    <li>jsp</li>
    <li>netw</li>
    <li>db</li>
    <li>job</li>
   </ol>

 
  <ol type="I" start="70">
    <li>web</li>
    <li>java</li>
    <li>jsp</li>
    <li>netw</li>
    <li>db</li>
    <li>job</li>
   </ol>

<hr>
  <h4>하위목록 만들기</h4>
  <ul>
   <li>web
    <ol>
     <li>html </li>
     <li>css </li>
     <li>javascript </li>
    </ol>
   </li>
   <li>db</li>
   <li>java</li>
  </ul>
  
  <ul>
   <li>coffee
    <ul>
     <li> cafe mocha</li>
     <li> capuccino </li>
     <li> caramel macchiato</li>
    </ul>
   </li>
   <li>tea
    <ul>
     <li>hot
      <ol>
       <li>BK tea</li>
       <li>MS tea</li>
      </ol>
     </li>
     <li>cold</li>
    </ul>
   </li>
   <li>milk</li>
   <li>water</li>
  </ul>


 <hr>
 <h3>3. dl - Description List(정의목록) </h3>
  <dl> 
   <dt>&lt;dt&gt;</dt>
   <dd>정의 내릴 대상</dd>
   <dt>&lt;dd&gt;</dt>
   <dd>  정의 내용</dd>
  </dl>
  <dl>
   <dt>html</dt>
   <dd>Hyper Text Markup Language.</dd>
   
  </dl> 

  <dl>
   <dt>&lt;dl&gt;</dt>
   <dd>Description List</dd>
  </dl>

  <dl>
   <dt>html</dt>
   <dd>Hyper Text Markup Language.</dd>
   <dd>웹페이지를 만드는 언어</dd>
   <dt>css</dt>
   <dd>웹페이지의 디자인을 담당</dd>
   <dt> javascript</dt>
   <dd>웹페이지의 동적인 기능을 담당</dd>
  </dl> 
  
  <br>
  <h4>나를 정의하는 목록</h4>
  <dl>
   <dt>&lt;천재&gt;</dt>
   <dd>머리가 미친듯이 좋음</dd>
   <dt>&lt;유머러스함&gt;</dt>
   <dd>굉장히 높은 드립력</dd>
   <dt>&lt;노력파&gt;</dt>
   <dd>열심히함 ㅋㅋ</dd>
  </dl>
 </body>
</html>

다들 잘 따라 하셨나요? 마지막 부분에 저는 <dl></dl> 태그를 사용하여 저를 정의해보았는데요, 여러분도 각자의 개성에 맞추어 내용을 조금씩 변경하며 공부하는 것은 어떨까요? 저는 이렇게 하면서 재밌게 공부하고 있습니다^^

 

그럼 다시 본론으로...

 

HTML 테이블 태그

<table></tabe>

  • 테이블을 생성해주는 태그입니다. 가장 크게 감싸지는 테이블 선언 태그라고도 할 수 있죠.
  • Table = 말 그대로 테이블이죠.

<tr></tr>

  • Table row의 약자입니다. 테이블 태그의 기본 구성은 각 줄(행)을 생성하는 것이기에 열을 생성하는 태그는 필수입니다.
  • <tr></tr> 태그 내에 <th></th> 태그와 <td></td>를 사용하여 내용물을 입력합니다.

<th></th>

  • Table header의 약자입니다. 제목 칸을 구성하는 태그입니다.
  • 두꺼운 글씨체와 중앙 정렬 문장이 특징입니다.

<td></td>

  • Table description의 약자입니다. 일반칸을 구성하는 태그입니다.
  • 일반 글씨와 왼쪽 정렬 문장이 특징입니다.

Colspan = "n" 속성과 Rowspan = "n" 속성

  • <th></th>태그 또는 <td></td> 속성 옆에 사용하는 속성입니다.
  • Colspan은 열(Column), Rowspan은 행(Row)을 합칠 때 (Merge) 사용하는 속성입니다. n 이 들어갈 자리에 몇 개의 칸을 합칠지 적습니다. ※주의 사항: 테이블 전체 크기보다 n값이 클 수 없습니다.
  • 열과 행을 다양한 방법으로 합쳐서 특별한 모양의 테이블을 만들 수 있습니다. 
    • ex) <th Colspan="3"></th>

 

===========================================================================

오늘의 문제

다만 CSS 없이 사용하는 테이블은 깔끔하게 눈에 보이지 않기에 연습할 때 CSS로 확실하게 볼 수 있도록 테두리와 색깔을 만드는 코드를 올려드릴 테니 <head></head> 태그 내에 복사해가세요!

<html>
 <head>
  <title>table -표</title>
  <style type="text/css">
   table, th, td{
   border:1px solid #e70;
   }
  </style>
 </head>
 <body>
 </body>
 </html>
table -표

table -표

tag 설명
table 표를 구성하는 태그
tr 줄을 구성하는 태그
th 제목칸을 구성하는 태그
글자는 볼드체, 내용은 수평 중앙정렬 됨.
td (일반)칸을 구성하는 태그

세로형

ID Name
lhj23 Lee hee ju
jej456 Ju eun ji

가로형

ID lhj23 jej456
Name Lee hee ju Ju eun ji

문제. 표 만들기 - 1

No. name id date
01 최민석 lgs88 2022.04.07
02 최지윤 kj044 2022.04.07
03 박진우 hss77 2022.04.07

문제. 표 만들기-2

a b c
1 2 3
4 5 6
7 8 9
10 11 12

칸(셀) 합치기

  • 가로로 합치기 - colspan
  • 세로로 합치기 - rowspan

1.가로칸(셀) 합치기 - colspan="n"

Title
a b c
1 2 3

Title t
a b c
1 2 3

Title
a b c
1 2 3
1.table-1
T i t
a bc
1 2 3
1.table-2
T i t
ab c
1 2 3
1.table-3
T i t
a b c
123
1.table-4
T i t
abc
1 23

2.세로칸(셀) 합치기 - rowspan="n"

2.table-1
T
a
1		 i t
b c
2 3
2.table-2
T i t
a b
2		 c
1 3
2.table-3
T i t
c
3
a c
1 2
2.table-4
T i t
c
a
1		 b
2 3

2.복합칸(셀) 합치기

문진표
학생 김미수 체온 36.5
이수지 37
오수아 34.3
문제. 복합칸 합치기
아이티윌 게스트하우스 예약 안내
방이름 대상 크기 가격
유채방> 여성 도미토리 4인실 1인 20,000원
동백방 남성 도미토리
가족 1팀
천혜향방 2인실
바깥채 단독: 전화문의 (010-777-5454)
반응형
저작자표시 (새창열림)

'Study > HTML' 카테고리의 다른 글

HTML 테이블 추가 문제 정답 공개!  (0) 2022.04.18
HTML#4 정답 공개 및 추가 문제!  (0) 2022.04.18
HTML 연습! 심심해서 직접 해보았습니다!  (2) 2022.04.11
HTML 태그#3 목록 태그 및 특수문자 출력!  (0) 2022.04.11
HTML 태그(TAG)#2 글꼴을 바꾸는 태그  (2) 2022.04.10
'Study/HTML' Related Articles more
Comments