html table 2
HTML 테이블 정의하기
HTML 테이블은 <table> 태그로 정의됩니다.
각 테이블 행은 <tr> 태그로 정의됩니다. 표 머리글은 <th> 태그로 정의됩니다. 기본적으로 테이블 표제는 굵게 표시되고 중앙에 배치됩니다. 테이블 데이터 / 셀은 <td> 태그로 정의됩니다.
예
<table style = "width : 100 %">
<tr>
<th> 이름 </ th>
<성> 성 </ th>
<th> 연령 </ th>
</ tr>
<tr>
<td> 질 </ td>
<td> 스미스 </ td>
<td> 50 </ td>
</ tr>
<tr>
<td> Eve </ td>
<td> 잭슨 </ td>
<dd> 94 </ td>
</ tr>
</ table>
참고 : <td> 요소는 테이블의 데이터 컨테이너입니다.
여기에는 모든 종류의 HTML 요소가 포함될 수 있습니다. 텍스트, 이미지, 목록, 다른 테이블 등
HTML 표 - 테두리 추가
표에 테두리를 지정하지 않으면 테두리없이 테두리가 표시됩니다.
테두리는 CSS 테두리 속성을 사용하여 설정됩니다.
예
table, th, td {
border: 1px solid black;
}
표 셀과 표 셀의 테두리를 정의해야합니다.
HTML 표 - 축소 된 테두리
테두리를 하나의 테두리로 축소하려면 CSS border-collapse 속성을 추가하십시오.
예
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML 표 - 셀 채우기 추가
셀 패딩은 셀 내용과 경계 사이의 간격을 지정합니다.
패딩을 지정하지 않으면 테이블 셀이 패딩없이 표시됩니다.
패딩을 설정하려면 CSS 패딩 속성을 사용하십시오.
예
th, td {
padding: 15px;
}
HTML 표 - 왼쪽 맞춤 표제
기본적으로 테이블 표제는 굵게 표시되고 중앙에 배치됩니다.
표 머리글을 왼쪽 정렬하려면 CSS text-align 속성을 사용하십시오.
예
th {
text-align: left;
}
HTML 표 - 테두리 간격 추가
테두리 간격은 셀 사이의 간격을 지정합니다.
표의 테두리 간격을 설정하려면 CSS border-spacing 속성을 사용하십시오.
예
table {
border-spacing: 5px;
}
참고 : 테이블에 테두리가 축소되어 있으면 테두리 간격이 적용되지 않습니다.
HTML 표 - 여러 열을 포함하는 셀
셀이 둘 이상의 열에 스팬되게하려면 colspan 속성을 사용하십시오.
예
<table style = "width : 100 %">
<tr>
<th> 이름 </ th>
<th colspan = "2"> 전화 </ th>
</ tr>
<tr>
<td> 빌 게이츠 </ td>
<td> 55577854 </ td>
<td> 55577855 </ td>
</ tr>
</ table>