테이블이란 무엇일까??
테이블은 표이다. 우리가 쉽게 접하는 예시는 캘린더(달력)이 있다테이블이란 무엇일까??
테이블은 표이다. 우리가 쉽게 접하는 예시는 캘린더(달력)이 있다.
그럼 우리의 웹사이트에서 테이블을 만들어보자.
테이블 만들기
일단 기본적으로 사용하는 태그들을 알려주겠다.
- <table> : 표를 담는 컨테이너
- <caption> : 표 제목
- <tbody> : 데이터 셀 그룹
- <thead> : 헤딩 셀 그룹
- <tfoot> : 바닥 셀 그룹
- <tr> : 행 여러<td>,<th> 포함
- <th>열 제목(헤딩) 셀, <td> : 데이터 셀
기본적인 태그들을 알았다면 이제 코드를 작성해보자
먼저 <head>에 다음과 같은 코드를 작성한다.
이 코드는 테이블 텍스트의 폰트사이즈와 색깔을 정한다
그리고 <body>에 다음과 같은 코드를 작성한다.
위의 코딩과같이 코딩을했다면
이렇게 표가 나온다.
코드를 만약에
이렇게 수정한다면,
tr - 행 이니까 행전체가 빨갛게 표시되고
td width = "80" 은 칸하나만 해당하기 떄문에 한칸만 80의 크기로 변환시키는 것이다.
이렇게 말이다.
이렇게 코드를 한다면
(카직스 옆에 있는 <b>태그는 텍스트를 굵게 처리하는 것이다.)
이런 결과가 나온다.
만약에 폰트 사이즈를 변경 하고싶다면 <font size="크기"> </font>로 하면된다.
이런식으로말이다.
다음은 병합이다.
- rowspan - 세로칸
- colspan - 가로칸
이런 결과가 나온다. 간단하게 <td>태그에 써주면된다.
근데 결과 이미지를 보면 무언가 어색하다는 느낌을 받는다. 이건 행과열이 맞지 않아서이다. 다시 맞춰보겠다.
이렇게 행과 열을 잘 맞춰주니 이렇게 잘 맞는 표를 확인할 수 있다.
기존에 배웠던걸 살짝 응용하면
이런 표도 만들 수 있다.
'자바웹프로그래밍' 카테고리의 다른 글
| [자바웹프로그래밍] 팝업창 기능추가와 이미지 호버 기능 만들기 (0) | 2025.04.12 |
|---|---|
| [자바웹프로그래밍] JS, 검색 기능 만들기,간단한 팝업창 구현하기 (0) | 2025.04.08 |
| [자바웹프로그래밍] 네비게이션 바 (부트스트랩) 가져오기 (0) | 2025.04.07 |
| [자바웹프로그래밍] 프론트(화면) 만들어보기 (0) | 2025.03.25 |
| [자바웹프로그래밍] 사이트만들기 (0) | 2025.03.22 |