Web (5) 표를 만드는 태그

표를 만드는 태그

(1) <table>, <tr>, <td>, <th> 태그 : 기본적인 표 만들기

<table> : 표 자리를 만드느 태그

<tr> : 행을 만드는 태그

<td> : 열을 만드는 태그. 각 행마다 셀을 만듬.

<th> : 표에 제목 셀 만들기. <td> 태그 대신 집어 넣으면 됨.

 

(2) <colspan>, <rowspan> : 행 또는 열 합치기

<td colspan=“합칠 셀의 개수”> 내용</td>

<th colspan=“합칠 셀의 개수”> 내용</th>

<td rowspan=“합칠 셀의 개수”> 내용</td>

<th rowspan=“합칠 셀의 개수”> 내용</th>

col이 좌우 합치기, row가 위아래 합치기

 

(3) <caption>, <figcaption> 태그 : 표에 제목 붙이기

<caption>태그는 <table>태그 바로 다음에 사용한다. 위쪽 중앙에 표시되며 <caption> 안에서 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수 있다.

<figcaption>태그는 <figure>태그와 함께 사용한다. <caption>태그와 는 같이 사용하지 않는다. 또한 중앙 위쪽에 정렬되지 않는다. <figure>태그는 <table>밖에서 시작되고 <figcaption>태그가 <table>앞에 있으면 표 위에 표시되고 <table>태그 뒤에 있으면 표 아래에 표시된다.

 

(4) aria-describedby 속성 : 표에 대한 설명 제공하기

화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 작성한 후 <table> 태그 안에 aria-describedby 속성을 추가해 연결하면 표를 이해하는 데 도움이 된다.

<table border=“1” aria-describedby=“summary”>

 

(5) <thead>, <tbody>, <tfoot> 태그 : 표 구조 정의하기

표의 제목 부분, 본문, 요약 부분으로 나누는 느낌.

 

(6) <col>, <colgroup> 태그 : 여러 열 묶어 스타일 지정하기

<col>태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫는 태그가 없다. <colgroup> 태그를 사용해서 여러 열을 묶어 스타일을 적용할 수 있는데 <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣으면 된다.

<col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다.

<colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 한다.