[ HTML ] 표 만들기

2024. 3. 9. 14:06· FRONT-END/└ HTML

환경 : Spring Tool Suite4

 


[ 테이블 태그 ]

  • <table>이라는 태그로 표를 만들 것임을 명시 및 표의 영역 지정
  • <thead>, <tbody>, <tfoot> 태그로 용도에 맞는 영역을 세부 생성(지정)
                      └ 안쓰면 자동으로 <tbody>가 생김
                      └ 범용성을 위해 세부 영역을 구분한다 
  • <tr> 태그로 줄 생성
  • <th>, <td> 태그로 칸 생성
           └ <th> 제목을 작성하는 칸, 굵은 글씨에 가운데 정렬을 제공
           └ <td>내용을 작성하는 칸, 일반 글씨에 좌측 정렬을 제공
           └ 표에 작성되는 모든 내용은 "칸"에만 작성 가능

[ 사용 예 ]

   - TableController.java

@Controller
@RequestMapping("/table")
public class TableController {
	@RequestMapping("/test01")
	public String test01() {
		return "/WEB-INF/views/table/test01.jsp";
	}
}

 

   - test01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<h1>표(테이블) 만들기(thead, tbody)</h1>

<table border="1">
	<thead align="center">
		<tr>
			<th>학생명</th> 
			<th>1차시기</th>
			<th>2차시기</th>
			<th>3차시기</th>
		</tr>
	</thead>
	<tbody align="center">
		<tr>
			<th>철수</th>
			<td>100</td>
			<td>150</td>
			<td>200</td>
		</tr>
		<tr>
			<th>영희</th>
			<td>150</td>
			<td>200</td>
			<td>250</td>
		</tr>
	</tbody>
</table>

    (+) border 속성의 기본 값은 0

    (+) align 속성을 활용해서 정렬 설정 가능 (left, right, center)

    (+) <thead>, <tbody> 태그를 활용하면 정렬을 각 태그에서 한 번만 설정해주면 됨. 

 

 

 

 

 

개인 공부 기록용입니다:)

728x90