개발 수업/WEB

[HTML] 표를 만드는 태그

오늘 하루s 2023. 6. 19. 19:19
728x90
더보기

Day35. 230619

표를 만드는 태그

기본적인 표 만들기

표의 기본형>

<table>
  <tr>
    <td> 내용</td>
    <td> 내용</td>
    ...
  </tr0>
  ..
</table>

 

다음과 같이 표 만드는 순서를 기억하면 표 만들기가 한결 쉬워진다.

1)  <table> 태그로 표 자리를 먼저 만들어 준다.

<table>

</table>

 

2)  <tr> 태그로 2개의 행을 만들어 준다.

<table>
  <tr>

  </tr>
  <tr>

  </tr>
</table>

 

3) <td> 태그로 각 행마다 셀을 3개씩 만들어 준다.

<table>
  <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
  </tr>
  <tr>
     <td>...</td>
     <td>...</td>
     <td>...</td>
  </tr>
</table>

 

4)  각 셀에 들어갈 내용은 <td>와 </td>사이에 입력해준다.

 

 

<th> 태크 - 표에 제목 셀 만들기

<caption> 태크 - 표에 제목 붙이기

table border="테두리두께" 
width="너비%px" height="높이%px" 
align="left | center | right"
bgcolor="색상명"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>table태그</title>
</head>
<body>
<h2>table태그</h2>
<!-- 속성
	<table border="테두리두께" 
	width="너비%px" height="높이%px" 
	align="left | center | right"
	bgcolor="색상명" -->
<table border="1" width="400" height="320" align="center" bgcolor="red">
	<caption>표제목</caption>
	<tr bgcolor="orange">
		<th align="left" bgcolor="yellow">컬럼명1</th>
		<th align="right">컬럼명2</th>
		<th>컬럼명3</th>
		<th>컬럼명4</th> 
	</tr>
	<tr align="left">
		<td>1-1</td>
		<td>1-2</td>
		<td>1-3</td>
		<td>1-4</td>
	</tr>
	<tr align="right">
		<td>2-1</td>
		<td>2-2</td>
		<td>2-3</td>
		<td>2-4</td>
	</tr>
	<tr align="center">
		<td>3-1</td>
		<td>3-2</td>
		<td>3-3</td>
		<td>3-4</td>
	</tr>
	<tr>
		<td>4-1</td>
		<td>4-2</td>
		<td>4-3</td>
		<td>4-4</td>
	</tr>
</table>
</body>
</html>

 

728x90