Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 오라클
- 상속
- css
- 설치
- JavaScript
- 연락처 프로그램
- String
- Event
- array
- javaservlet
- 파일 입출력
- 윈도우 #단축키
- list
- spring
- Java
- 데이터베이스
- function
- jsp
- 코틀린#클래스#상속
- 자바
- springframework
- 연산자
- kotlin #return #jump
- GUI
- property
- 다형성
- jQuery
- File 클래스
- Method
- html
Archives
- Today
- Total
Binary World
<CSS> Table 본문
<CSS Table>
<10_table.html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>CSS Table</title> <style> /* table, th, td { border: 1px solid grey; border-collapse: collapse; } */ th, td { border-bottom: 1px solid grey; border-collapse: collapse; } table { width: 100%; } thead tr { background: #ebebeb; } /* :nth-child(even) - 짝수번째 자식 요소 :nth-chilc(odd) - 홀수번째 자식 요소 :nth-child(x) - x번째 자식 요소 */ tbody tr:nth-child(even) { background: lightgreen; } tbody tr:hover { background: lightpink; } </style> </head> <body> <h1>CSS Table</h1> <!-- table -> caption -> thead -> tfoot -> tbody --> <table> <caption style="caption-side: bottom">급여</caption> <thead> <tr> <th>월</th> <th>급역액</th> </tr> </thead> <tfoot> <tr> <td>합계</td> <td>330,000</td> </tr> </tfoot> <tbody> <tr> <td>1월</td> <td>100,000</td> </tr> <tr> <td>2월</td> <td>110,000</td> </tr> <tr> <td>3월</td> <td>120,000</td> </tr> <tr> <td>4월</td> <td>130,000</td> </tr> </tbody> </table> </body> </html> | cs |
<출력화면>
'개발자의 길 > Web Programming' 카테고리의 다른 글
웹 소스 코드 예제 및 설명 사이트(비공개) (0) | 2017.04.06 |
---|---|
<CSS> List (0) | 2017.03.30 |
<CSS> Link (0) | 2017.03.30 |
<CSS> Text (0) | 2017.03.30 |
<CSS> Margin (0) | 2017.03.30 |
Comments