본문 바로가기

CSS

css -table

목록을 표현했을 때 항상 <ul> or <ol>과 <li>의 조합이 필요했듯이,

테이블을 표현하기 위해 여러 태그들의 조합이 필요합니다.

<table>, <thead>, <tbody>, <tr>, <th>, <td> 등이 있습니다.

 

테이블은 항상 <table>태그로 감싸져있습니다.

<table>태그 내에 행도 만들고, 열도 만들게 되는 것입니다.

 

한 행을 시작할 때는 <tr>로 시작합니다.

tr은 table row의 줄임말입니다.

 

각각의 셀은 <tr>태그 내에 <td>태그를 사용합니다.

td는 table data의 줄임말입니다.

 

이번에는 <td>대신 <th>태그를 사용했습니다.

table heading의 줄임말입니다.

 

th태그를 사용했더니 가운데정렬이 되고, 글씨 두께가 두꺼워졌습니다.

 

물론 td태그를 그대로 사용하고,

css로 같은 효과를 낼 수도 있습니다.

 

<td>나 <th>태그에 colspan, rowspan이라는 attribute를 추가해서 구현할 수 있습니다.

 

rowspan은 행 병합, colspan은 열을 병합합니다.

 

 

'CSS' 카테고리의 다른 글

CSS- position  (0) 2020.03.29
css -input  (0) 2020.03.29
css-list  (0) 2020.03.29
css-margin auto  (0) 2020.03.29
css -Block vs Inline  (0) 2020.03.29