HTML+CSS+자바스크립트 웹코딩의 정석 2-1강
2021. 3. 30. 18:43ㆍHTML+CSS
728x90
표 만들기2
- thead - 표 제목
- tbody - 표 본문
- tfoot - 표 요약
- 자바스크립트를 이용하여 각 장마다 표 제목과 표 요약을 출력할 수 있음
- 행,열 합치기
- rowspan
- colspan
- td ------ = 합칠 셀 갯수
|
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table, td {
boder-collapse: collapse;
}
</style>
</head>
<body>
<h1>우리반 목록</h1>
<table border="1">
<thread>
<tr>
<th>이름</th>
<th>전화번호</th>
<th>전공</th>
</tr>
</thread>
<tbody>
<tr>
<td>이름1</td>
<td>0101</td>
<td>ㅁㅁㅁ</td>
</tr>
<tr>
<td>이름1</td>
<td>0101</td>
<td>ㅁㅁㅁ</td>
</tr>
<tr>
<td>이름1</td>
<td>0101</td>
<td>ㅁㅁㅁ</td>
</tr>
<tr>
<td colspan="2">aa</td>
<td rowspan="2">ㅁㅁㅁ</td>
</tr>
<tr>
<td colspan="2">aa</td>
</tr>
</tbody>
</table>
</body>
</html>
|
cs |
-------예시
삽입하기
- img - 이미지삽입
- audio - 오디오
- video - 비디오
- a href - 하이퍼링크
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>a태크는 link걸기, inline 요소 </h1>
<p><a href = "div_p_span.html">분할태그</a><br></p>
<p><a href = "nulolo.html">목록태그</a><br> </p>
<a href = "../source/03/structure.html">목록태그</a>
<a href = "/webProject/source/03/structure.html" target="_blank">
<img src="/webProject/source/03/image/healing.jpg"></a>
</body>
</html>
|
cs |
728x90
'HTML+CSS' 카테고리의 다른 글
| CSS 기본 텍스트를 표현하는 스타일 (0) | 2021.04.02 |
|---|---|
| CSS 기본 - CSS 다루기 (0) | 2021.04.01 |
| HTML+CSS+자바스크립트 웹코딩의 정석 3강 (0) | 2021.03.30 |
| HTML+CSS+자바스크립트 웹코딩의 정석 2강. (0) | 2021.03.29 |
| HTML+CSS+자바스크립트 웹코딩의 정석 1강. (0) | 2021.03.29 |