HTML 테이블
-테이블은 <table>태그로 정의된다.
-각 행은 <tr>태그로 정의된다.
-테이블 해더는 <th>로 정의된다.
-테이블 데이터/셀은 <td>로 정의된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> <tr> <td>BBANG</td> <td>ONE</td> <td>21</td> </tr> <tr> <td>BOSU</td> <td>SHIN</td> <td>21</td> </tr> </table> | cs |
참고
<td> 요소는 텍스트,이미지,목록,다른테이블 등 모든 종류의 HTML요소를 포함할 수 있다.
테이블 테두리
-<head>안의 <style>에 border 선언을 해준다.
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 | <!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid black; } </style> </head> <body> <table style="width:100%"> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> <tr> <td>BBANG</td> <td>ONE</td> <td>21</td> </tr> <tr> <td>BOSU</td> <td>SHIN</td> <td>21</td> </tr> </table> </body> </html> | cs |
- border를 정의할땐 꼭 table과 table cell을 동시에 선언 해야한다.
- 테이블의 테두리가 2개인 이유는 <table>태그와 <th>,<td>의 테두리들이 겹쳐있기 때문이다.
테이블 한 줄 테두리
-한 줄로 설정하려면 border-collaspe속성을 사용해야 한다.
1 2 3 4 5 6 7 8 | <head> <style> table, th, td { border: 2px solid black; border-collapse: collapse } </style> </head> | cs |
