html 테이블 합치는방법
간단하게 예를들어 1교시와 3교시까지 (세로)를 합치려면 <td>에 rowspan에 원하고자하는 길이만큼 입력해줍니다.
간단하게 <td rowspan="3">test 3개 합치기</td> 와 같이 사용하 실 수 있습니다.
가로합치기는 <td colspan="2"></td>로 사용할 수 있습니다.
시간 |
월요일 | 화요일 | 수요일 | 목요일 | 금요일 | 토요일 |
---|---|---|---|---|---|---|
1교시 9:20-10:10 | test 3개 합치기 | |||||
2교시 10:20-11:10 | test 2개 합치기 | test 3개 합치기 | ||||
3교시 11:20-12:10 | ||||||
4교시 12:20-13:10 | ||||||
5교시 13:20-14:10 | test 3개 합치기 | |||||
6교시 14:20-15:10 | ||||||
7교시 15:20-16:10 | test 3개 합치기 | |||||
8교시 16:20-17:10 | ||||||
9교시 17:20-18:10 |
또한 기본 스타일인 <style>에 미리 원하고자하는 테이블형태를 입력해놔 table, th, td를 사용하였을때 자동으로 설정된 기능을 사용할 수 있도록 설정해 놓습니다.
<style>
table{
border: 2px solid gray; //테이블 테두리의 선을 gray 색으로 2px 두깨로 출력하라
border-collapse: collapse;
}
th{
border:2px solid gray;
background-color: #d0d0d0;
font-weight:bold;
}
td{
border:2px solid gray;
background-color: #ffffff;
width:500px;
height:60px;
}
</ style>
'공부하자 > HTML' 카테고리의 다른 글
테이블 요소 및 테이블 태그 속성 (0) | 2017.04.18 |
---|---|
목록 태그/ 정의 목록 태그 (0) | 2017.04.18 |
HTLM 이미지/글자 테두리 설정하는 방법 (0) | 2016.11.27 |
HTML편집 프로그램들 알아보기 (0) | 2016.11.27 |
이미지 링크 거는 방법 (0) | 2016.11.27 |