1. HTML 표(table)
먼저, 표의 가로줄은 열 row, 세로줄은 행 column(왜 난 맨날 헷갈려)
표를 만드는 태그는 <table>태그로 정의할 수 있다.
각 가로줄인 열(row)은 table row에서 <tr>를 사용한다. 화면에 꽉 채워진 표를 위해서 style="width:100%"를 추가한다. 왼쪽에서부터 오른쪽으로 각각의 제목은 table heading에서부터 <th>를 붙여서 지정한다. 자동적으로 굵고, 중앙에 위치한 텍스트로 나타난다.
<table style="width:100%">
<th>Number</th>
<th>Name</th>
<th>Age</th>
</table>
각 열의 제목에 따라 내용을 채우고 싶을 때는 table data/cell에서 <td>를 붙인다. 여기에서는 이미 첫 열에서 number, name, age라고 했기 때문에 각 헤딩에 맞게 데이터를 작성한다. 데이터는 텍스트, 다른 표, 이미지 등이 가능하다.
<tr>
<td>1</td>
<td>Anna</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
<td>12</td>
</tr>
<tr>
<td>3</td>
<td>Harry</td>
<td>11</td>
</tr>
즉, <table>안에 첫 줄(열)의 헤딩(제목)을 <th>으로 설정하고,
각 헤딩의 갯수에 따라 데이터를 <td>로 채워주는데 각 열에 맞게 채워주는 것이므로 <tr>을 사용한다.
그런데 이 상태로 두고 실행해보면, 표인데 선이 없다!!
스타일을 추가해야한다. border속성을 추가해야 한다.
table, th, td {
border: 1px solid black;
}
그런데! 또 그러면 선이 이렇게 이중으로 된다. 각 데이터마다 보더가 만들어지니까.
지금 상태가 좋다면 냅둬도 좋겠지만, 하나의 깔끔한 선을 만드려면 두 선을 뭉개줘야 한다. collapse를 사용한다.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
그러면 흔히 테이블을 만들 때 생각하는 하나의 깔끔한 선의 표가 생성된다.
데이터와 선 사이의 간격을 좀 넓히고 싶다면? padding을 사용해서 여백을 추가해준다.
th, td {
padding: 15px;
}
원래 헤딩은 볼드체에 중앙배열이 기본값이지만, 원하는 쪽으로 바꿀 수 있다. text-align을 사용한다.
th {
text-align: left/right;
}
collapse하기 전 원래 상태에서 경계선 사이에 간격을 주고 싶다면? border-spacing을 사용한다.
table {
border-spacing: 5px;
}
셀 합치기를 가로로 하고 싶다면? 각 행이 합쳐지는 것이므로 colspan을 사용한다. 몇 개의 칸을 합치고 싶은지에 따라 숫자를 써준다.
<tr>
<th> number </th>
<th colspan="2"> title </th>
</tr>
셀 합치기를 세로로 하고 싶다면? 각 열이 합쳐지는 것이므로 rowspan을 사용한다. 역시 합치고 싶은 칸의 개수에 맞게 숫자를 써준다.
<table>
<tr>
<th>Number</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td rowspan="2">Name</td>
</tr>
<tr>
<td>13</td>
</tr>
</table>
표에 제목을 붙이고 싶다면? <caption>태그를 <table>태그 바로 뒤에 넣어준다.
<table style=100%>
<caption>Table Name</caption>
<tr>
<th>...</th>
</tr>
<tr>
<td>...</td>
</tr>
</table>
하나의 특정한 표에 특정한 특징을 추가하고 싶다면? 이쯤 되니 감이 생긴다. 특정한 것을 지정하는 데 id를 사용한다는 것을. 스타일 속성에서 지정된 표 이름에 어떤 스타일을 추가할 것인지 정의한 후에 <table>에 id로 표 이름을 다시 불러준다.
<html>
<head>
|
<style> table#t01 { width: 80% background-color: #f1f1c1 } </style> </head> |
<body>
<table id="t01">
<tr>
<th>..</th>
</tr>
<tr>
<td>..</td>
</tr>
</body>
</html>
2. HTML 목록(lists)
목록에는 unordered list라고 해서 정렬 순서 없이 나열된 것과 ordered list라고 해서 숫자나 알파벳 순서에 따라서 나열된 형태가 있다. 전자는 <ul> 후자는 <ol>를 사용한다. 그리고 리스트의 내용은 <li>를 사용한다. closing tag도 붙여줘야 한다.
- 정렬되지 않은 목록(unordered list)
<ul>...</ul>을 사용한다. 각 항목은 기본값으로 까만 점(disc)으로 표시된다. <ul>에 list-style-type을 지정하면 선호도에 따라서 빈원(circle), 사각형(square), 아무것도 없는 것(none)으로 선택할 수 있다.
<ul style="list-style-type:disc/circle/square/none;">
<li>coffee</li>
<li>tea</li>
<li>juice</li>
</ul>
- 정렬된 목록(ordered list)
<ol>...</ol>을 사용한다. 기본적으로 각 항목은 숫자(type="1")로 표시된다. 선호도에 따라서 타입 속성을 추가하여 알파벳 대문자(type="A"), 알파벳 소문자(type="a"), 로마자 대문자(type="I"), 로마자 소문자(type="i")를 선택할 수 있다.
<ol type="1/A/a/I/i">
<li>coffee</li>
<li>tea</li>
<li>juice</li>
</ol>
이 외에도 가능한 목록은 다음과 같다.
- 각 항목을 설명하는 목록(description lists)
description list에서 <dl>...</dl>을 사용한다. 그 아래에 큰 항목은 description term에서 <dt>..</dt>, 각 아래에 묘사하는 부분은 <dd>를 사용한다. 설명 부분은 오른쪽으로 더 이동해서 보인다.
<dl>
<dt>tea</dt>
<dd>-from Jeju</dd>
<dt>milk</dt>
<dd>-from Jeju</dd>
</dl>
- 각 항목 밑에 또 항목있는 목록(nested lists)
목록 안에 또 둥지를 틀어서? <ul>이든 <ol>이든 상관없이 또 목록을 만들고 싶은 항목 아래에 목록 태그를 달아주면 된다.
<ul>
<li>tea</li>
<ol>green tea</ol>
<ol>black tea</ol>
<ol>chai tea</ol>
</ul>
- 특정 숫자부터 시작되는 목록(control list counting)
정렬된 목록인데 특정한 숫자로부터 시작하고 싶은 목록을 만든다. start="원하는 숫자"를 추가한다.
<ol start="30">
<li>...</li>
</ol>
- 수평으로 나열된 목록(horizontal lists)
이 경우는 홉페이지에 들어가보면 소개-목적-작품-연락처 등 가로로 목록이 변형된 것처럼 만들 수 있는 태그이다.
이건 지금 쓰기에 넘나 기니까 CSS가면 배워야겠다.
+느낀점
이걸 지금 다 하나하나 알고 있는게 유용할까? 만약 워드프레스로 하면 바로 표 만드는 도구가 있을거 같은데.... 그래도 지금 기초적인거 하나하나 알아두면 좋긴 할거 같기도 하고.
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
| HTML 식별속성, 아이프레임, 자바스크립트, 파일경로 (0) | 2020.03.19 |
|---|---|
| HTML 블록과 인라인 요소 (0) | 2020.03.18 |
| HTML 링크, 이미지, 이미지맵, 배경이미지, 그림요소 (0) | 2020.03.17 |
| HTML 색상, CSS (0) | 2020.03.16 |
| HTML 인용 요소, 코멘트, (0) | 2020.03.15 |
댓글