tr, th, td
<tr>: a row of cells in a table.
<th>: a cell as header of a group of table cells
<td>: a cell of a table that contains data
| Book | Name | Total |
|---|---|---|
| 1 | Harry Potter | 100 |
<table>
<tr>
<th>Book</th>
<th>Name</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>Harry Potter</td>
<td>100</td>
</tr>
</table>
colspan, rowspan
- colspan: This attribute contains a non-negative integer value that indicates for how many columns the cell extends. col들을 통합 // colspan="3" 3개의 col을 옆으로 3개 합침)
- rowspan: This attribute contains a non-negative integer value that indicates for how many rows the cell extends. row들을 통합 // rowspan="3" 3개의 row을 아래로 3개 합침
<tr>
<td colspan="2">Total Sales</td>
<td>600</td>
</tr>
thead, tbody, tfoot
<thead>: Table Head Element <thead> defines a set of rows defining the head of the columns of the table.
<tbody>: a set of table rows <tr> elements, indicating that they comprise the body of the <table>.
<tfoot>: element defines a set of rows summarizing the columns of the table.
| Book | Name | Total |
|---|---|---|
| 1 | Harry Potter | 100 |
| 2 | Hunger Game | 200 |
| 3 | Lord of the rings | 300 |
| Total | 600 | |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<style>
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Book</th>
<th>Name</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Harry Potter</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Hunger Game</td>
<td>200</td>
</tr>
<tr>
<td>3</td>
<td>Lord of the rings</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>600</td>
</tr>
</tfoot>
</table>
</body>
</html>
caption, colgroup
<caption>: specifies the caption (or title) of a table.
<colgroup>: defines a group of columns within a table. <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
Table tag
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 태그</title>
<style>
table,
tr,
th,
td {
border: solid 1px black;
/* 충돌 되는 중복 border 제거 */
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- table>(tr>th*3)+(tr>td*3)*3 -->
<table>
<caption>
이 table은 영국에서 최초로 시작되어 일년에 한바퀴 돌면서...
</caption>
<colgroup>
<col class="구분" />
<col class="이름" />
<col class="판매량" />
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>책 이름</th>
<th>책 가격</th>
<th>판매량</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>hello</td>
<td>10000</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>hello2</td>
<td>2000</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>hello3</td>
<td>3000000000000000000</td>
<td>3</td>
<!-- <td rowspan="2">3</td> -->
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">총판매량</td>
</tr>
</tfoot>
<!-- colspan :
This attribute contains a non-negative integer value that indicates for how many columns the cell extends.
(col들을 통합 // colspan="3" 3개의 col을 옆으로 3개 합침)
rowspan:
This attribute contains a non-negative integer value that indicates for how many rows the cell extends.
row들을 통합 // rowspan="3" 3개의 row을 아래로 3개 합침 -->
<!-- <tr>
<td colspan="3">총 판매량</td>
<td>6</td>
</tr> -->
</table>
</table>
</body>
</html>
Scope
Scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.
The scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers
scope="col": specifies that the cell is a header for a column.
scope="row": Specifies that the cell is a header for a row.
scope="colgroup": specifies that the cell is a header for a group of columns.
scope="rowgroup": specifies that the cell is a header for a group of rows.
| Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | |
|---|---|---|---|---|---|---|
| First bus | 05:00 | 05:30 | 05:30 | 05:00 | 06:30 | 06:30 |
| Last bus | 00:50 | 00:50 | 00:50 | 00:50 | 01:30 | 23:50 |
<table>
<caption>Timetable for the bus</caption>
<tbody>
<tr>
<th></th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
</tr>
<tr>
<th scope="row">First bus</th>
<td>05:00</td>
<td>05:30</td>
<td>05:30</td>
<td>05:00</td>
<td>06:30</td>
<td>06:30</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Last bus</th>
<td>00:50</td>
<td>00:50</td>
<td>00:50</td>
<td>00:50</td>
<td>01:30</td>
<td>23:50</td>
</tr>
</tfoot>
</table>
Block elements(block-level elements)
<article>,<header>,<h1>,<nav>,<section>,<div>,<ul>,<ol>,<li>,<p> ...
A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). You can visualize them as a stack of boxes.
Find more about Block elements
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!-- inline element -->
<!-- inline element has width of content itself -->
<!-- *** block element cannot be nested inside inline element *** -->
<img width="200px" src="img/a.jpg" alt="">
<img width="200px" src="img/a.jpg" alt="">
</body>
</html>
Inline element(inline-level elements)
<span>, <a>, <button>,<video>, <input>, <br>,...
Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
An inline element does not start on a new line and only takes up as much width as necessary.
Find more about Inline element
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!-- inline element -->
<!-- inline element has width of content itself -->
<!-- *** block element cannot be nested inside inline element *** -->
<img width="200px" src="img/a.jpg" alt="">
<img width="200px" src="img/a.jpg" alt="">
</body>
</html>
Top comments (0)