2017. 2. 20. 16:20ㆍHTML/예제
1. Table 예제코드
<!DOCTYPE html> <html lang="kr"> <head> <meta charset="UTF-8"> <title>앙큼한유채 - Table</title> </head> <body> <font size="8" color="blue"><b>테이블 예제입니다.</b></font><br> <table border="1" width="500" bgcolor="#55cc00"> <tr> <td width="100" bgcolor="#999999">Line1 - 1</td> <td>Line1 - 2</td> </tr> <tr> <td>Line2 - 1</td> <td>Line2 - 2</td> </tr> </table> <table border="1" width="80%"> <tr> <td width="30%" bgcolor="#99cc00">Line3 - 1</td> <td bgcolor="#99cc00">Line3 - 2</td> </tr> <tr> <td>Line4 - 1</td> <td>Line4 - 2</td> </tr> </table> </body> </html>
|
2. 실행화면
-1) 화면의 크기에 따라 "Line3", "Line4"번의 테이블 크기가 커지는 화면
-2) 실행화면
3. 해설
1.<table border="1" width="500" bgcolor="#55cc00"> -> 테이블의 테두리선의 굵기가 1이고, 넓이가 500이며, 배경색이 "#55cc00"인 테이블을 생성합니다. 2. <tr> -> 라인의 한 줄을 생성지점을 알려줍니다.
3. <td width="100" bgcolor="#999999">Line1 - 1</td> -> 위에서 생성한 한 줄에다가 넓이가 100이고, 배경색이 "999999"인 한 칸을 만듭니다. 4. <td>Line1 - 2</td> -> 생성된 한 칸 옆에 또 다른 한 칸을 생성합니다. 5. </tr> -> 라인의 한 줄의 생성의 종료지점을 알려줍니다. 6. <tr> -> 새로운 한 줄을 생성합니다. 7. <td>Line2 - 1</td> -> 새로 생성한 한 줄의에다가 한 칸을 생성합니다. 8. <td>Line2 - 2</td> -> 생성된 한 칸 옆에 또 다른 한 칸을 생성합니다. 9. </tr> -> 라인의 한 줄의 생성의 종료지점을 알려줍니다. 10. </table> -> 테이블의 생성 종료지점을 알려줍니다. 11. <table border="1" width="80%"> -> 테이블의 테두리선의 굵기가 1이고, 크기가 창의 80%인 새로운 테이블을 생성합니다. 12. <tr> -> 새로 만들어진 테이블에 새로운 라인을 하나 생성합니다. 13. <td width="30%" bgcolor="#99cc00">Line3 - 1</td> -> 새로 만들어진 라인에 크기가 테이블 크기의 30%이며, 배경색이 "99cc00"인 칸을 생성합니다. 14. <td bgcolor="#99cc00">Line3 - 2</td> -> 생성된 칸 옆에 배경색이 "99cc00"인 칸을 생성합니다. 15. </tr> -> 라인의 한 줄의 생성의 종료지점을 알려줍니다. 16. <tr> -> 새로운 한 줄을 생성합니다. 17. <td>Line4 - 1</td> -> 새로 만들어진 라인에 칸을 생성합니다. 18. <td>Line4 - 2</td> -> 새로 만들어진 라인에 칸을 생성합니다. 19. </tr> -> 라인의 한 줄의 생성의 종료지점을 알려줍니다. 20. </table> -> 테이블의 생성 종료지점을 알려줍니다.
|
4. 참고사항 (테이블 - <table>, 라인 - <tr>, 칸 - <td>)
크기와 배경색의 경우 테이블에서 설정할 경우 테이블 안에 모든 라인과 칸에 적용되고, 라인에서 설정할 경우 설정한 라인과 그 안의 테이블에 적용되고, 칸에 적용할 경우 칸만 적용됩니다.
즉, 영향력은 테이블이 가장 작고, 라인, 칸 순으로 되겠습니다.
'HTML > 예제' 카테고리의 다른 글
| 7. 픽셀 아트 (0) | 2017.08.22 |
|---|---|
| <button>태그 링크 (0) | 2017.03.22 |
| 02. Hyper Link (0) | 2017.02.20 |
| 01. Hello, World! (0) | 2017.02.20 |