공부하자/HTML

테이블 합치기

YoBot 2017. 3. 22. 15:15

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>