HTMl에서 중요한 table태그입니다.
Html에서 틀을 잡아주는 기본적으로 제공하는 태그라고 생각하시면 됩니다.
제가 코드를 짤때 은근 많이 쓰는 태그입니다. (물론 가장 많이 쓰는 태그는 div, span태그입니다.) 이런 태그들은 의미없는 태그라고 합니다.
<table> 전체적인 상황을 잡아주는 태그
<tr> 문단 같은 느낌
<td> 문장 같은 느낌
예시 코드,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>과일</td>
<td>체소</td>
<td>샤브샤브</td>
</tr>
<tr>
<td>수박</td>
<td>베추</td>
<td>소고기</td>
</tr>
</table>
</body>
</html>
이렇게 사용하 실 수 있습니다. css로 뼈대를 잡아 보겠습니다.
css는 이해가 안 되신다면 건너 뛰셔도 상관없습니다. 아직 배우지 않으셨고, 좀 있다 배우실 것 이거든요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{
border: 1px black solid;
}
td,tr{
border: 1px black solid;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>과일</td>
<td>체소</td>
<td>샤브샤브</td>
</tr>
<tr>
<td>수박</td>
<td>베추</td>
<td>소고기</td>
</tr>
</table>
</body>
</html>
요거를 붙여넣기 하시면 새로운 모양이 나타나실 것입니다.
표 같은 느낌이 날 거에요!
'코딩 > Front-end 웹 개발' 카테고리의 다른 글
| 2. HTML 기본적인 문법 (0) | 2019.11.04 |
|---|---|
| 1 - HTML을 공부하기 전 일단 알아야 할 것은? HTML이 무엇인가? (0) | 2019.11.04 |
해닉크
일상, 코딩, 잡다한 지식, 내 생각등을 쓰는 블로그 입니다.