728x90
표 만들기 - 1
html에서 제공하는 함수를 이용해서 표를 만들 수 있다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<talbe>
</talbe>
</body>
</html>일단은 <table>태그를 써줘야 한다.
그리고 한 행을 만들라면 <tr>을 써야한다. 그리고 모든 요소에는 <td>라는 태그를 붙여야한다. 코드는 다음과 같다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
<tr>
<td>유현석</td>
<td>남</td>
<td>수원</td>
</tr>
<tr>
<td>김용민</td>
<td>여</td>
<td>시흥</td>
</tr>
</table>
</body>
</html>다음과 같이 코드를 작성하면
다음과 같이 표 같이 정렬 행과 열로 정렬되서 나오는 것을 볼 수 있다.
여기에 표 처럼 줄을 넣고 싶으면 <table>태그에 <table border = "2">라고 설정하면 되고 안에 숫자는 굵기를 설정해주는 것이다.
코드를 보면 다음과 같다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table border = "2">
<tr>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
<tr>
<td>유현석</td>
<td>남</td>
<td>수원</td>
</tr>
<tr>
<td>김용민</td>
<td>여</td>
<td>시흥</td>
</tr>
</table>
</body>
</html>
조금 투박해보인다. 세련되게 하고 싶으면 border 속성말고 css로 해야된다.
본 내용은 생활코딩 사이트에서 더 자세하게 보실 수 있습니다.
728x90
'HTML 기초' 카테고리의 다른 글
| [HTML 기초][HTML 표 만들기 3] (2) | 2021.01.04 |
|---|---|
| [HTML 기초][HTML - 표 만들기 2] (0) | 2021.01.04 |
| [HTML 기초][HTML - 군대에서 HTML] (0) | 2021.01.03 |
| [HTML기초][HTML - 문서의 구조] (0) | 2021.01.03 |
| [HTML 기초][HTML - 태그의 중첩과 목록] (0) | 2021.01.03 |