티스토리 뷰

카테고리 없음

3. HTML Basics III

kkd927 2014. 7. 6. 03:35


Learning about tables


1. Introduction

지금까지 다음과 같은 내용을 배움

  1. how to set up the skeleton of an HTML file

  2. headings, paragraphs, images and links

  3. font colors, sizes, and types

  4. background colors, aligning text, bolding and italic resizing font

이번 코스에서는 <table>, <div>, <span> 에 대해서 배울 것이다.



2. What are tables?

정리된 데이터를 표현하기 위해 테이블은 매우 유용하다.

<table> : 테이블의 rows 와 columns 을 이용해 정보를 깔끔하게 표시



3. Rows of information

테이블은 행과 열로 구성된 그냥 뭉텅이

<tr> : tr 태그를 통해 table row 를 만들 수 있다.



4. A single column

<td> : table data 태그





5. Adding a second column

<tr>에 <td>를 추가함으로써 column 을 늘릴 수 있다.
















Better tables


6. Head of the table

<thead> : 테이블의 정보를 가짐 head 태그와 유사

<tbody> : 테이블의 내용을 가짐 body 태그와 유사



7. Table Heads

<th> : column heading 태그





8. Naming your table

colspan 속성을 이용한 column 합치기





9. Style that head!

style 속성을 통해 table head를 꾸밀 수 있다








Div and span


11. ‘Div’ide and conquer

Short for "division," <div> allows you to divide your page into containers (that is, different pieces).





12. Link it!

The smart use of <div>s will eventually allow you to create visual HTML objects like sidebars, menus, and more.



13. Spantastic

While <div> allows you to divide your webpage up into pieces you can style individually, <span> allows you to control styling for smaller parts of your page, such as text





14. Span is the man

you can also change font size, font family, and any other style attribute you can think of


댓글