표를 삽입할 때 기본적으로 <table> 태그의 border 속성을
이용해 <table border="1"> 처럼 사용하면 표에 테두리를 그릴
수 있습니다. 여기에 CSS의 border 속성을 이용해 테두리의 색상이나 형태, 너비
등을 지정할 수 있습니다.
표 테두리 만들기
테두리는 border 속성으로 만듭니다. <table>,
<th>, <td> 요소에 적용할 수 있습니다.
<tr> 요소에는 적용되지 않습니다.
예제
기본 모양
기본 모양은 테두리가 없는 것입니다.
<th> 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다.
<table>
<thead>
<tr>
<th>Lorem</th><th>Ipsum</th><th>Dolor</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tr>
<td>Lorem</td><td>Ipsum</td><td>Dolor</td>
</tr>
<tbody>
</table>
table {
width: 100%;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
표에 테두리 만들기
<table> 요소에 border 속성으로 테두리를 만들면 표 외각에
테두리가 생깁니다.
table {
width: 100%;
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
셀에 테두리 만들기
<th>, <td> 요소에 테두리를 만들면 각
셀에 테두리가 생깁니다.
table {
width: 100%;
border: 1px solid #444444;
}
th, td {
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
테두리 사이의 간격을 없애고 싶다면 border-collapse 속성을 추가합니다.
table {
width: 100%;
border: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border: 1px solid #444444;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
테두리와 내용 사이의 간격은 padding 속성으로 정합니다.
table {
width: 100%;
border: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border: 1px solid #444444;
padding: 10px;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
가로선 만들기
세로선 없이 가로선만 만들 때는 다음과 같이 합니다.
table {
width: 100%;
border-top: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #444444;
padding: 10px;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.