HTML 기초, <tr><td>태그의 width, height, rowspan, colspan,bgcolor 속성 (20번째)

HTML 기초, <tr><td> 태그의 width, height, rowspan, colspan, bgcolor 속성

◎ 셀의 너비와 높이를 조정하는  width, height 속성

<table> 에 width, height 속성을 지정하면 지정된 크기가 테이블내의 모든 셀에 적용되어 모든 셀의 크기가 동일하게됩니다.

셀마다 크기를 다르게 지정하기 위해서는 <td> 태그에 width, height 속성을 지정합니다.

속성의 값은 픽셀과 비율 (%)로 지정할 수 있습니다. <td> 태그에서 비율을 적용하면 테이블을 기준으로해서 비율이 정해집니다. 만약 비율로 지정하게되면 테이블의 너비를 100%로 가정해 그에 맞게 셀의 크기가 정해져 픽셀로 지정하는 것보다는 더

깔끔하게 보입니다.

예문)

<tr width="n / %" height="n / %"> </tr>

<td width="n / %" height="n / %"> </td>

<th width="n / %" height="n / %"> </th>

tip.

셀에 높이와 너비 속성을 지정할 때 유의할 점은?

<tr> 태그와 <td> 태그에 서로 모두 height, width 속성이 지정되어 있으면 <td> 속성 값이 적용됩니다. 왜일까요?

<td> 태그가 더 안쪽에 있어서 더 나중에 적용되기 때문입니다. 태그가 꼬일 수 있으니까 width, height 속성은 <td> 태그에만

사용하는게 좋습니다.

같은 열 내에 있는 셀은 서로 다른 세로 길이를 가질 수 없습니다. 즉 한 셀의 높이(세로길이)를 늘리면 옆에 있는 것들도 함께

늘어나게 됩니다.

◎ 셀을 합치는 rowspan, colspan 속성

테이블에서 셀을 합치기 위해서는 'rowspan' 과 'colspan' 속성을 사용하면 됩니다. 이 두개의 속성은 <th>, <td> 태그의 안에서만 사용됩니다. 행의 셀을 합치기 위해서는 'rowspan' 속성에 셀로 합치고 싶은 만큼의 행수를 지정하면 됩니다.

열의 셀을 합치기 위해서도 'colspan' 속성값을 지정하면 됩니다.

예문)

<td rowspan="n" colspan="n"> </td>

<th rowspan="n" colspan="n"> </th>

◎ 셀에 부분적으로 색상을 지정하는 bgcolor 속성

<td>, <tr> 태그에 'bgcolor' 속성을 지정하면 부분적으로 셀에 색상을 지정할 수 있습니다.

예문)

<tr bgcolor="색명 or RGB값"> </tr>

<td bgcolor="색명 or RGB값"> </td>

<관련글>

[유용한정보/IT / PC] - HTML 기초, 테이블의 태그의 속성. align, valign (19번째)