[HTML] HTML 테이블

26699 단어 html웹프로그래밍html

1. HTML Tables(중요)

: 표를 만드는 방법, 홈페이지의 레이아웃을 잡을 때도 사용 가능

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>
  • <table> : table 정의
  • <th> : 테이블의 제목(행)
  • <td> : 테이블의 행
  • <tr> : 테이블의 열

2. Table Size

- 테이블 너비

  • <table> 요소에 style 특성을 추가해 테이블의 너비를 설정할 수 있다.
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
</table>

- 테이블 열 너비

  • 특정 열의 크기를 설정하려면 <th>, <td> 요소에 style 특성을 추가한다
<table style="width:100%">
  <tr>
    <th style="width:70%">Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
</table>

- 테이블 행 높이

  • 특정 행의 높이를 설정하려면 <tr> 특성에 style 요소를 추가한다

3. Table Header

- 테이블 헤더

  • <th> : 행을 테이블 헤더로 나타내는 요소
    -> 첫 번째 열을 테이블 헤더로 사용하려면 각 행의 첫 번재 셀을 요소로 정의한다.
<table>
  <tr>
    <th>Firstname</th>
    <td>Jill</td>
    <td>Eve</td>
  </tr>
</table>

- 테이블 헤더 정렬

  • 기본적으로 테이블 헤더는 굵은 글씨로 중앙에 위치한다
  • text-align CSS 특성을 이용해 테이블 헤더를 왼쪽으로 정렬할 수 있다
th {
  text-align: left;
}

- 여러 열에 대한 헤더

  • <th> 요소의 colspan 특성을 사용하여 두 개 이상의 열에 걸쳐 있는 헤더를 만들 수 있다.
<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
</table>

4. HTML Table Padding & Spacing

- 셀 패딩

  • 셀 모서리와 셀 함량 사이의 공간
  • 기본적으로 0으로 설정
  • padding CSS 속성을 사용하여 변경 가능
th, td {
  padding: 15px;
}
  • 콘텐츠의 측면에만 패딩을 추가하려면 <padding-top>, <padding-bottom>, <padding-left>, <padding-right>

- 셀 spacing

  • 각 셀 사이의 공간
  • 기본적으로 2픽셀로 설정
  • border-spacing table css 속성을 사용하여 변경 가능
table {
  border-spacing: 30px;
}

5. HTML Table Colspan & Rowspan

- colspan

  • colspan 요소를 사용하여 여러 열에 걸쳐 셀을 만들 수 있다.
<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
</table>

- rowspan

  • rowspan 요소를 사용하여 여러 행에 걸쳐 셀을 만들 수 있다.
<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
</table>

6. Table Styling

  • td:nth-child(even), th:nth-child(even) : 테이블의 색상 지정 가능
td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

7. Colgroup

  • <colgroup> : 특정 열의 스타일을 지정하는데 사용
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two columns to define a style for the two columns:</p>

<table style="width: 100%;">
	<colgroup>
  		<col span="2" style="background-color: #D6EEEE">
	</colgroup>
	<tr>
		<th>MON</th>
		<th>TUE</th>
		<th>WED</th>
		<th>THU</th>
		<th>FRI</th>
		<th>SAT</th>
		<th>SUN</th>
	</tr>
</table>

</body>
</html>
  • <span> : 스타일을 얻는 열 수를 지정
  • <col> : 비어있는 요소를 삽입
  • visibility: collapse : 열을 숨길 수 있는 속성
[백준] 7662번: 이중 우선순위 큐
[프로그래머스][3차]n진수 게임

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage