IT Study/Web
HTML 테이블 예제-01
도뿌리
2018. 7. 25. 13:13
실행 화면
소스 코드
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- table --> <table border = "2" style = "width: 100%"> <tr> <!-- table row --> <td>홍</td> <!-- table data --> <td>길동</td> <td>24</td> </tr> <tr> <td>일</td> <td>지매</td> <td>22</td> </tr> <tr> <td>임</td> <td>꺽정</td> <td>27</td> </tr> </table> <table border = "2" style = "width: 80%"> <caption>주소록</caption> <!-- 테이블 제목 --> <tr> <!-- table row --> <td>홍</td> <!-- table data --> <td>길동</td> <td>24</td> </tr> <tr> <td>일</td> <td>지매</td> <td>22</td> </tr> <tr> <td>임</td> <td>꺽정</td> <td>27</td> </tr> </table> <table border = "2" style = "width: 80%"> <caption>주소록</caption> <tr> <th>성</th> <!-- table header --> <th>이름</th> <th>나이</th> </tr> <tr> <!-- table row --> <td>홍</td> <!-- table data --> <td>길동</td> <td>24</td> </tr> <tr> <td>일</td> <td>지매</td> <td>22</td> </tr> <tr> <td>임</td> <td>꺽정</td> <td>27</td> </tr> </table> <br><br> <table border = "1" style="width: 50%;"> <caption>주소록</caption> <tr> <th>성</th> <th>이름</th> <th>나이</th> <th colspan="2">전화번호</th> <!-- colspan -> 옆칸(컬럼 )을 합치는 것 --> </tr> <tr> <td>홍</td> <td>길동</td> <td>24</td> <td>123-4567</td> <td>222-3333</td> </tr> </table> <table border="1" style="width: 100%;"> <tr> <th>이름</th> <td>홍길동</td> </tr> <tr> <th rowspan="2">전화번호</th> <!-- rowspan -> 아래 칸(row)을 합치는 것 --> <td>222-3333</td> </tr> <tr> <td>234-4567</td> </tr> </table> </body> </html> | cs |