[HTML] 표만들기(표를 만드는 태그 <table>, <caption>, <tr>, <td>, <th>)

1. 표의 구성 요소 : 행(row) 와 열(column)

2. 표를 만드는 태그

1.  <caption> : 표 제목 ( border속성 사용해 테두리 두께 설정 가능, 기본값 0)
2.  <table> : 표 생성
3.  <tr> : 행
4.  <td> : 셀
5.  <th> : 제목 셀 (표의 첫 번째 줄을 head로 강조하고자 할때 사용 + 가운데 정렬)

(사용 예시)

<table border ="1">
    <caption> 표의 제목 </caption>
    <thead>
    	<tr>
        	<th> 1행 1열</th>
            <th> 1행 2열</th>
            <th> 1행 3열</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<th> 2행 1열</th>
            <th> 2행 2열</th>
            <th> 2행 3열</th>
        </tr>
    </tbody>
    ....
    
    
<table>

 

※ 실행결과

....

표의 제목

1행 1열	1행 2열	1행 3열
2행 1열	2행 2열	2행 3열

3. 표의 구조 정의하기

• 표의 구조를 "제목", "본문", "요약" 부분으로 나눈다
• <thead>, <tbody>, <tfoot> 태그 사용
• 웹 브라우저 화면에서 보이지는 않지만, 화면 낭독기나 자바스크립트 등에서 읽을 수 있다
• 표의 본문이 길 경우 자바스크립트를 이용해 제목과 바닥 부분을 고정하고 본문만 스크롤 가능하도록 할 수 있다.

4. rowspan 속성 : 행 합치기

• 기본형 : <td rowspan = "합칠 셀의 개수"> 셀의 내용 </td>
•  

 

5. colspan 속성 : 열 합치기

• 기본형 : <td colspan = "합칠 셀의 개수"> 셀의 내용 </td>
•  

 

 

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

[HTML] HTML 폼(form) 삽입하기(<form>, <input>,etc)  (0)	2022.12.29
[HTML] 이미지, 오디오, 하이퍼링크 삽입하기(<img>,<audio>,<video>, <a> 태그)  (0)	2022.12.28
[HTML] 목록 태그(<ol>, <ul>, <li>태그/ <dl>, <dt>, <dd>태그)  (0)	2022.12.27
[HTML] 텍스트 태그(<h>, <p>, <br/>, <blockquote>,<b>,<i>)  (0)	2022.12.27
[HTML] HTML이란? HTML 기본 구조/태그  (0)	2022.12.26