<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table border = "2" width = "40%">
<caption>Caption</caption>
<colgroup>
<col span = "2" style = "background: red">
<col style = "background: blue">
</colgroup>
<thead style="background: magenta">
<tr>
<th>NO</th><th>name</th><th>addr</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>가가가</td><td>서초동</td>
</tr>
<tr>
<td>2</td><td>나나나</td><td>방배동</td>
</tr>
<tr>
<td>3</td><td>다다다</td><td>신사동</td>
</tr>
</tbody>
<tfoot style="background: yellow">
<tr>
<td>111</td><td>222</td><td>333</td>
</tr>
</tfoot>
</table>
</body>
</html>
rowSpan은 줄을 합칠 때 쓰고, colSpan은 칸을 합칠 때 씁니다.
1) rowSpan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<table border = "2" width = "40%">
<caption>Caption</caption>
<colgroup>
<col span = "2" style = "background: red">
<col style = "background: blue">
</colgroup>
<thead style="background: magenta">
<tr>
<th>NO</th><th>name</th><th>addr</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan = "3">1</td>
<td>가가가</td>
<td>서초동</td>
</tr>
<tr>
<td>나나나</td>
<td>방배동</td>
</tr>
<tr>
<td>다다다</td>
<td>신사동</td>
</tr>
</tbody>
<tfoot style="background: yellow">
<tr>
<td>111</td><td>222</td><td>333</td>
</tr>
</tfoot>
</table>
</body>
</html>
2) colSpan
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>table</title>\
<style>
td{ text-align: center;
}
</style>
</head>
<body>
<table border = "2" width = "40%">
<caption>Caption</caption>
<colgroup>
<col span = "2" style = "background: red">
<col style = "background: blue">
</colgroup>
<thead style="background: magenta">
<tr>
<th>NO</th><th>name</th><th>addr</th>
</tr>
</thead>
<tbody>
<tr >
<td colspan = "3">1</td>
</tr>
<tr>
<td>2</td><td>나나나</td><td>방배동</td>
</tr>
<tr>
<td>3</td><td>다다다</td><td>신사동</td>
</tr>
</tbody>
<tfoot style="background: yellow">
<tr>
<td>111</td><td>222</td><td>333</td>
</tr>
</tfoot>
</table>
</body>
</html>
3) caption tag: table 이름 지정->table안에 tag를 해주었지만, table 위에 오게 됩니다.
4) colgroup tag를 해주고 안에 col tag로 span 속성과 style을 주면, 컬러를 지정 할 수 있습니다.
- span = 2해주게 되면 컬럼 2칸을 차지 한다는 말입니다.
- colgroup tag보다는 각각 tag에 직접 지정해둔 속성이 우선하게 됩니다.
5) th는 자동으로 가운데정렬 되고, 굵게 됩니다. 나머지도 정렬하고 싶으면 위와 같이 css를 사용해서 해줍니다.
'컴퓨터 프로그래밍 > HTML' 카테고리의 다른 글
| 공백넣기 (0) | 2020.06.17 |
|---|---|
| form tag_input&select (0) | 2020.05.19 |
| div, span and sementic tag (0) | 2020.05.19 |
| blocking tag and inline tag (0) | 2020.05.19 |
| input_스타일 적용 (0) | 2020.05.19 |
