반응형
안녕들 하시죠!
이번시간에는 HTML로 테이블을 만들어보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
|
cs |
이런식으로 출력됩니다.
테이블 사이에 선을 추가해 주려면 <head></head>에 border 스타일을 추가해줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html>
<head>
<title>Table Ex</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:5%;">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</body>
</html>
|
cs |
2개의 선이 아닌 깔끔한 1개의 선으로 테이블을 만들고 싶다면 collapse를 추가해줍니다.
|
1
2
3
4
5
6
|
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
|
cs |
HTML rowspan
테이블에서 열을 합칠 때 사용합니다.
|
1
|
<th rowspan ="2">Firstname</th>
|
cs |
Fisrtname 만 rowspan을 사용해보겠습니다.
이런식으로 열이 합쳐지게됩니다.
조금 깔끔하게 만들어 보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<table style="width:5%;">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td >Jill </td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<th rowspan="2">Steven</th>
<th rowspan="2">King</th>
<td>10</td>
</tr>
<tr>
<td>33</td>
</tr>
|
cs |
이런식으로 열을 합하거나 colspan을 사용하여 행을 합하여 사용하면 될 것 같습니다.
오늘은 여기까지입니다 감사합니다 !
'웹 프로그래밍' 카테고리의 다른 글
| Jsp/Servlet을 이용한 개인 홈페이지 만들기(로그인, 회원가입,중복체크) -- 1 (0) | 2019.09.01 |
|---|---|
| Javascript의 문서객체모델(DOM) (0) | 2019.07.13 |
| Javascript addEventListener를 이용한 간단한 계산기 만들기 (0) | 2019.07.13 |
| Apache Tomcat 설치 (0) | 2019.07.08 |
| HTML 기본 태그 (0) | 2019.07.08 |