HTML 9단계 - 테이블(Table) 2탄

안녕하세요

HTML 9단계 테이블(table) 2탄 시간이 돌아왔습니다.

저번 시간에는 테이블(table) 1탄을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 9단계 테이블(table) 2탄 시작해볼께요~

 

저번 시간에 이어서 자주 사용하는 테이블(table) 속성을 몇가지 더 살펴보겠습니다.

 

1. cellpadding, cellspacing

 

테이블(table) 속성중에 cellpadding은 셀의 여백을 지정할 수 있으며, 

cellspacing은 셀과 셀 사이의 공간을 지정할 수 있습니다.

 

자 그럼 먼저 cellpadding의 예문 소스를 살펴보겠습니다.

<table cellpadding="10">

  <tr>

    <td>cellpadding이 10픽셀인 테이블</td>

  <tr>

</table>

 

cellpadding을 10으로 지정하면 테이블 경계선과 셀안의 내용 사이에 여백이 10픽셀 만큼 지정됩니다.

 

자 그럼 다음은 cellspacing의 예문 소스를 살펴보겠습니다.

<table border="1" cellspacing="3">

  <tr>

    <td>cellspacing이 3픽셀인 테이블</td>

    <td>cellspacing이 3픽셀인 테이블</td>

  <tr>

  <tr>

    <td>cellspacing이 3픽셀인 테이블</td>

    <td>cellspacing이 3픽셀인 테이블</td>

  <tr>

</table>

 

cellspacing을 3으로 지정하면 셀과 셀 사이의 공간이 3픽셀 만큼 지정이 됩니다.

 

2. colspan, rowspan

 

테이블(table) 속성중에 colspan은 열을 확장할때 사용할 수 있으며, 

rowspan은 행을 확장할 때 사용할 수 있습니다.

 

자 그럼 먼저 colspan의 예문 소스를 살펴보겠습니다.

<table border="1">

  <tr>

    <td colspan="2">1행 1열</td>

  <tr>

  <tr>

    <td>2행 1열</td>

    <td>2행 2열</td>

  <tr>

</table>

 

colspan을 2으로 지정하면 1열이 확장되어 보여집니다.

 

자 그럼 다음은 rowspan의 예문 소스를 살펴보겠습니다.

<table border="1">

  <tr>

    <td rowspan="2">1행 1열</td>

    <td>1행 2열</td>

  <tr>

  <tr>

    <td>2행 1열</td>

  <tr>

</table>

 

rowspan을 2으로 지정하면 1행이 확장되어 보여진것을 확인하실 수 있습니다.

 

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 폰트(font) 태그에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.