HTML

목록이나 표를 만드는 Tag 들 !

yg-0103 2020. 9. 30. 21:52

1. <ol></ol> , <ul></ul> , <li></il>

<ol> 태그는 orderlist로 순서가 있는 목록을 작성할 때 사용한다. 

<ul> 태그는 unorderlist로 순서가 없는 목록을 작성할때 사용한다.

<ol>태그와 <ul> 태그는 자식으로 <li> 태그를 가진다.

<li> 태그는 단독으로 사용할 수 없고 부모 요소로 <ol> , <ul> 태그가 와야 한다.

<li> 태그 안에 <ol> , <ul> 태그가 또 들어갈 수 있다.

 

2. <table></table>

<table> 태그는 표를 만들 때 표의 영역을 설정하기 위해 사용된다.

<table> 태그에 css로 border-collapse: collapse; 라고 작성하면

표의 행과 칸의 사이사이의 여백을 제거해줄 수 있다.

 

3. <tr></tr>

<table> 태그 안에 작성하며 표의 행을 설정할 때 사용된다.

<tr> 태그의 개수가 그 표의 행의 개수를 의미한다.

 

4. <th></th>,  <td></td>

<th> , <td> 태그는 <tr> 태그 안에 작성하며,

<th>,<td> 태그 모두 표의 칸을 만들어 준다.

표를 작성했을 때 머리에 해당하는 부분에는 <th> 태그로 설정해주고,

보통 data 에는 <td> 태그를 사용한다.

<th> 태그의 속성에는 열에 대한 설명을 적을 수 있는 abbr,

열과 행을 확장해줄 수 있는 colspan, rowspan 이 있고 기본값은 1 이다.

<td> 태그의 속성에는 열과 행을 확장해줄 수 있는 colspan, rowspan 이 있고 기본값은 1 이다.

 

5.<caption></caption>

<caption> 태그는 표의 제목을 설정해주는 태그이고

열리는 <table> 태그 바로 밑에 작성되어야 한다.

<table> 태그 하나에 하나만 사용 가능하다.