2일차 table 태그

HTML & CSS 💙/HTML 연습

2일차 table 태그

Maryland_09 2020. 10. 24. 16:22

표 형식의 레이아웃을 만드는 태그

<table> </table> 사이에 <tr> <td>태그를 넣는다.

<table> : 표를 나타내는 태그
<tr> : 행을 나타내는 태그 (table row)
<th> : 제목 셀을 나타내는 태그 (table header)
<td> : 셀을 나타내는 태그 (table data)
<caption>: 표의 제목을 나타내는 태그
<thead>: 제목 행을 그룹화하는 태그
<tfoot>: 바닥 행을 그룹화하는 태그
<tbody>: 본문 행을 그룹화하는 태그

<tr>

      <td>Korean</td>

      <td>Math</td>

      <td>Science</td>

</tr>

<tr> 태그 안에 <td>가 늘어날 수록 가로 셀이 여러개가 생긴다.

세로로 행을 늘리고 싶으면 <tr>태그를 늘려주면 된다.

Border: 테이블의 두께 설정

큰 따옴표 안에 숫자를 넣어 두께 값을 넣어준다.

<table border="2"> border - 테이블의 테두리 두께

Colspan : 열 합치기 (가로로)

따옴표 안에 숫자를 넣어 몇 개의 열을 합할 것인지 값을 넣어준다.

Rowspan: 행 합치기 (세로로)

colspan과 마찬가지로 몇 개를 합할 것인지 값을 넣어준다.

<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>repl.it</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<table border="3">
		<tr>
			<td rowspan="4"> Mid-term test scores </td>
		</tr>

		<tr>
			<td>Korean</td>
			<td>Math</td>
			<td>Science</td>
		</tr>
		<tr>
			<td>100</td>
			<td>95</td>
			<td>98</td>
		</tr>
		<tr>
			<td colspan="2"> Average </td>
			<td>90</td>
		</tr>
	</table>

<table>
  <table border="1">
    <tr>
      <td>1행 1열</td>
      <td>1행 2열</td>
      <td>1행 3열</td>
      <td>1행 4열</td>
    </tr>

    <tr>
      <td>2행 1열</td>
      <td>2행 2열</td>
      <td>2행 3열</td>
      <td>2행 4열</td>
    </tr>

     <tr>
      <td colspan="2">3행 1열</td>
      <td>3행 3열</td>
      <td>3행 4열</td>
    </tr>
  </table>
  
</body>

</html>

결과물

저작자표시 비영리 변경금지