예제 2-16. 기본 표 만들기. 예제 2-17. 이미지를 가지는 표 만들기
WEB/HTML5-CONCEPT 2017. 11. 4. 18:37 |예제 2-16. 기본 표 만들기.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>기본 구조를 가진 표 만들기</title></head> <body> <h3>기본 구조를 가진 표</h3> <hr> <table border="1"> <caption>1학기 성적</caption> <thead> <tr><th>이름</th><th>HTML</th><th>CSS</th></tr> </thead> <tfoot> <tr><th>합</th><th>225</th><th>230</th></tr> </tfoot> <tbody> <tr><td>황기태</td><td>80</td><td>70</td></tr> <tr><td>이재문</td><td>95</td><td>99</td></tr> <tr><td>이병은</td><td>40</td><td>61</td></tr> </tbody> </table> </body> </html> | cs |
예제 2-17. 이미지를 가지는 표 만들기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>표에 이미지 삽입</title> </head> <body> <h3>표에 이미지 삽입</h3> <hr> <table> <caption>좋아하는 과일</caption> <tbody> <tr> <td><img src="media/apple.png"></td> <td><img src="media/banana.png"></td> <td><img src="media/mango.png"></td> </tr> </tbody> </table> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 2-19. 링크의 target 속성 활용 (0) | 2017.11.04 |
|---|---|
| 예제 2-18. 하이퍼링크 만들기 (0) | 2017.11.04 |
| 예제 2-15. 정의 리스트 만들기 (0) | 2017.11.04 |
| 예제 2-12. <ol>로 라면 끓이는 순서나열. 예제 2-13. <ul>로 좋아하는 음식 나열. 예제 2-14. 중첩 리스트 만들기. (0) | 2017.11.04 |
| 예제 2-11. <img> 태그로 이미지 삽입 (0) | 2017.11.04 |