[basic html/css] 3. html - table tags

19
BASIC HTML & CSS 3. html - table tags [ 2017.01.12. Thu ]

Upload: hyejin-oh

Post on 12-Apr-2017

181 views

Category:

Technology


10 download

TRANSCRIPT

BASIC HTML & CSS3. html - table tags

[ 2017.01.12. Thu ]

To Do

1. Basic Tags○ h1~h6, div, p, span, img, a, strong, b, em, i

2. List tags○ ul li, ol li, dl dt dd

3. Table tags○ table, thead, tbody, tfoot, tr, td, colgroup, col

4. Form tags○ form, fieldset, legend, label, input, select, option, textarea, button

5. Etc○ header, footer, nav, aside, section, article○ iframe, blockquote, ruby, sup, sub, pre, code, mark

table

tableHTML <table> 요소는 표 형식의 데이터,

즉 2차원 데이터 표를 통해 표현 된 정보를 나타냅니다.

inline-block

tablecolgroup, col

thead, tbody, tfoottr, th, td

inline-block

이름 성별 회비

철수 남 30,000

영희 여 30,000

합계 60,000

thead

tbody

thead, tbody, tfoot

tfoot

tr, td

th th th

td td td

td td td

td td td

tr

tr

tr

tr

rowspan=""행 합병

rowspan

rowspan

2행 2열

3행 2열

rowspan="3"

행 합병

colspan=""열 합병

colspan

colspan

2행 2열

2행 3열

2행 4열

colspan="3"

열 합병

captioncaption, figcaption

표의 제목이나 간략한 내용 등을 적습니다.

table

Find out!

Practice

이름 오혜진 연락처 010-xxxx-xxxx

이메일 [email protected]

자기소개 안녕하세요 , 28살 여자 개발자입니다 .

SNS페이스북 트위터 코드펜

O O O

practice

Guide

HTML<table border="1"> <tbody>

<tr> <td></td> <td></td> <td></td> <td></td>

</tr>(중략)

</tbody></table>

CSStable { width: 100%; border-collapse: collapse; border: none;}

td { padding: 10px; border: 1px solid #ccc;}

Reference

• 이지스퍼블리싱 테이블(13m) https://youtu.be/1ucyf8O8ehI• 생활코딩 표1: 기본(10m) https://youtu.be/XUTFXu0f4qo• 생활코딩 표2: 구조(6m) https://youtu.be/H84fuDj1Jxs• 생활코딩 표3: 병합(5m) https://youtu.be/i7oKd-eKvdw

Facebook / Twitter / Codepen

@zineeworld