Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[Basic HTML/CSS] 3. html - table tags

293 views

Published on

-

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[Basic HTML/CSS] 3. html - table tags

  1. 1. BASIC HTML & CSS 3. html - table tags [ 2017.01.12. Thu ]
  2. 2. 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
  3. 3. table
  4. 4. table HTML <table> 요소는 표 형식의 데이터, 즉 2차원 데이터 표를 통해 표현 된 정보를 나타냅니다. inline-block
  5. 5. table colgroup, col thead, tbody, tfoot tr, th, td inline-block
  6. 6. 이름 성별 회비 철수 남 30,000 영희 여 30,000 합계 60,000 thead tbody thead, tbody, tfoot tfoot
  7. 7. tr, td th th th td td td td td td td td td tr tr tr tr
  8. 8. rowspan="" 행 합병 rowspan
  9. 9. rowspan 2행 2열 3행 2열 rowspan="3" 행 합병
  10. 10. colspan="" 열 합병 colspan
  11. 11. colspan 2행 2열 2행 3열 2행 4열 colspan="3" 열 합병
  12. 12. caption caption, figcaption 표의 제목이나 간략한 내용 등을 적습니다. table
  13. 13. Find out!
  14. 14. Practice
  15. 15. 이름 오혜진 연락처 010-xxxx-xxxx 이메일 ohyejin@mymusictaste.com 자기소개 안녕하세요, 28살 여자 개발자입니다. SNS 페이스북 트위터 코드펜 O O O practice Guide HTML <table border="1"> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> (중략) </tbody> </table> CSS table { width: 100%; border-collapse: collapse; border: none; } td { padding: 10px; border: 1px solid #ccc; }
  16. 16. 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
  17. 17. Facebook / Twitter / Codepen @zineeworld

×