table, tr, td, rowspan, colspan
th, thead, tbody, tfoot, caption
테이블을구성하는대표적인태그는위와같아요
<html>
<head>
<title>신나는 html</title>
</head>
<body>
<table border=1 cellspacing=0 cellpadding=50 width="100%" style="text-align:center;">
<caption>caption은 표의 제목! </caption>
<thead>
<tr>
<th colspan="2">1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td rowspan="2">4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</tfoot>
</table>
</body>caption
<caption> caption은 표의 제목! </caption>
table태그는하나의caption태그만을가질수있어요.그리고table태그바로다음에써줘야합니다.
또,caption을쓰기만했을때,table의바로위쪽가운데로정렬되어나와요.
물론caption의위치를임의로조정할수도있어요.여기서는2번라인의caption태그에style="text-align:left;"속성을줘서왼쪽정렬해봤어요.
<table border=1 cellspacing=0 cellpadding=50 width="100%" style="text-align:center;">
<caption style="text-align:left;">caption은 표의 제목! </caption>
<thead>
<tr>
<th colspan="2">1</th>
<th>2</th>
</tr>
</thead>두번째는thead와tfoot이에요.
thead태그는table의header,즉제목행을하나로묶기위해사용해요.
<thead>
<tr>
<th colspan="2">1</th>
<th>2</th>
</tr>
</thead>
...
<tfoot>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</tfoot>tfoot태그는table의footer,즉마지막행을하나로묶기위해사용하구요.
바로첫 행 과마지막 행 을고정하고table의내용만스크롤하기위해서예요.
친구목록만바뀌고'친구'라고써진상단바와사람아이콘,안읽은대화갯수표시등이있는하단바는위치가변하지않는것을볼수있어요. 여기서상단바를thead,하단바를tfoot,친구목록을tbody라고생각하면돼요
th 태그
강조하고싶은셀의텍스트를굵게(bold)나타내주는기능
다른사람들이코드를보기만해도제목셀이라는것을알수있도록표시하는역할
보통의경우에는일반셀(칸)을의미하는td대신제목셀(칸)을의미하는th로만든셀을thead로묶어줘요
th태그를쓰게되면글자를굵게해주는기능과함께자동으로중앙정렬이돼요.
table태그자체에중앙정렬속성을줘서모두가중앙정렬이되어있지만,style="text-align:center"를지워보세요.th태그만중앙정렬로남아 있는다 .
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵