HTML table 대각선 그리기

1 개요[ | ]

HTML 테이블 대각선 그리기
HTML table 대각선 넣기
CSS table 대각선 넣기

SVG line 태그 활용

html

Copy

<line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" />

html

Copy

<line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width=".5" />

2 예제 1[ | ]

html

Copy

<style>
.slash {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="gray" /></svg>');
}
.backslash {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>');
}
table {
	border-collapse: collapse;
	border-top: 1px solid gray;
	border-left: 1px solid gray;
}  
th, td {
	border-bottom: 1px solid gray;
	border-right: 1px solid gray;
	padding: 5px;
}
</style>

<table>
  <tr><th class="backslash"></th><th>점수</th></tr>
  <tr><td>한놈</td><td>10</td></tr>
  <tr><td class="slash">두시기</td><td>20</td></tr>
  <tr><td>석삼</td><td class="slash"></td></tr>
</table>

3 예제 2: 시간표[ | ]

대각선이 있는 칸에 글자를 넣은 예제
대각선이 있는 칸은 기본 왼쪽 정렬이고, 오른쪽 정렬할 내용은 div에 넣으면 된다.

html

Copy

<style>
.slash {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="gray" /></svg>');
}
.backslash {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>');
}
.slash, .backslash { text-align: left; }
.slash div, .backslash div { text-align: right; }
table {
	border-collapse: collapse;
	border: 1px solid gray;
}  
th, td {
	border: 1px solid gray;
	padding: 5px;
	text-align: center;
}
</style>
<table>
  <tr>
    <th class='backslash' style='width:60px'><div>요일</div>교시</th>
    <th>월</th>
    <th>화</th>
    <th>수</th>
    <th>목</th>
  </tr>
  <tr>
    <td>1</td>
    <td>국어</td>
    <td>영어</td>
    <td>수학</td>
    <td>미술</td>
  </tr>
  <tr>
    <td>2</td>
    <td>사회</td>
    <td>체육</td>
    <td>국사</td>
    <td class='slash'>H<div>R</div></td>
  </tr>
</table>

4 같이 보기[ | ]