-
[HTML] 태그와 표만들기1Try./HTML. 2019. 11. 28. 01:27
태그
<hn> 제목 표시태그 h1~h6 <p> 단락 태그 <br> 줄바꿈 태그 <ul> 순서가 필요하지 않을 때 사용태그 ex) ■,■,■,■ <ol> 순서가 필요할 때 사용태그 ex)1,2,3,4ul/ol Test
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul li{ list-style:square;} ol li{ list-style: upper-alpha;} </style> </head> <body> <ul> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> </ul> <ol> <li>list-a</li> <li>list-b</li> <li>list-c</li> <li>list-d</li> </ol> </body> </html>결과
표 조절하기
1.<table>태그에서 border속성을 사용 2.CSS를 사용 ex) table{ border(두께) : ipx(스타일) solid(색상) black;}표 크기 조절하기
1.<table>태그에서 width 속성사용 2.CSS에서 width(너비)와 height(높이) 속성사용 ex)table{ width:400px; height:200px;} +)화면 크기에 따라 표너비가 자동으로 조절되게 하려면 width값을 %로 지정한다표를 만드는 태그(<table>,<th>,<tr>,<td>)
<table></table> 표 형태로 컨텐츠를 표시하는 태그 <caption></caption> 테이블의 제목역할 <th></th> table header 제목을 나타내는 셀(칸), 셀의 내용을 중앙에 정렬 및 볼드체 <tr></tr> table row 행(row)을 표시하는 태그 <td></td> table data 셀(cell) 하나의 셀(칸)을 표시하는 태그 반드시<tr>태그의 하위로 존재+)<caption>은 생략가능
셀 합치기(span)
1)셀을 가로로 합치기
<td>태그 또는 <th>태그에서 colspan 속성을 사용
colspan = "합친 개수"
2)셀을 세로로 합치기
<td>태그 또는 <th>태그에서 rowspan 속성을 사용
rowspan = "합친 개수"
ex)
<table> <tr><td>a</td><td>b</td><td rowspan="3">h</td><td>j</td></tr> <tr><td colspan="2">c </td><td>k</td></tr> <tr><td>d</td><td>e</td><td rowspan="2">l</td></tr> <tr><td>f</td><td>g</td><td>i</td></tr> </table>여러 열 묶기
<col> 한 열에 있는 모든 셀을 묶는다 (닫는태그x) <colgroup> 여러 개의 <col>태그를 묶어 그룹으로 스타일을 적용 span속성 이용하여 열 묶기 가능 <colgroup span = "2">'Try. > HTML.' 카테고리의 다른 글
[HTML] 시맨틱 태그 - html5의 문서구조 (0) 2019.11.28