[ 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
'· FRONT-END > └ HTML' 카테고리의 다른 글
[ HTML ] 특수문자 코드표 (0) | 2024.03.13 |
---|---|
[ HTML ] 목록, 검색 페이지에서 태그를 활용해보기 (0) | 2024.03.10 |
[ jsp / html ] 정보 수정 페이지에서 성공/실패 페이지로 (0) | 2024.03.03 |
[ HTML ] <select>, <option> 태그 (0) | 2024.03.01 |
[ HTML ] <input> 태그 속성 Type의 값 (0) | 2024.02.28 |