FE/html

html 표

잔망루피 2021. 6. 5. 20:00

<table> 구성요소

<th> 테이블의 속성명
<tr> 테이블의 행
<td> 테이블의 열

 

예시

<table border="1">
            <thead>
            <tr>
                <th>#</th>
                <th>제목</th>
                <th>작성자</th>
                <th>게시글</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="post : ${post}">
                <td th:text="${post.id}"></td>
                <td th:text="${post.title}"></td>
                <td th:text="${post.author}"></td>
                <td th:text="${post.content}"></td>
            </tr>
            </tbody>
        </table>

 

 

테이블 디자인

border 테이블의 테두리(숫자가 높을수록 테두리가 굵음)
width 가로
height 세로
align 정렬
colspan 가로 합치기
rowspan 세로 합치기

 

 

 

참고 👉 https://coding-factory.tistory.com/184

 

[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

HTML을 하다보면 굉장히 많이 사용하는 태그가 바로 일것입니다. 바로 표를 만들어주는 HTML태그인데요. 표 뿐만 아니라 갤러리를 만들 수도 있고 지금은 잘 사용하지 않습니다만 웹사이트 전체

coding-factory.tistory.com

 

반응형

'FE > html' 카테고리의 다른 글

[Thymeleaf] th:each  (0) 2021.07.22
홈 화면으로 돌아가는 버튼 만들기  (0) 2021.06.26
id, name, class  (0) 2021.06.05
[Error] html textarea에 데이터가 있어도 null로 넘어옴  (0) 2021.06.05
input 태그  (0) 2021.06.05