[css3] border - 표에 테두리 그리기

1. 개념

border - 표에서 테두리 그리기

table 태그에서 border 라는 속성을 이용하게 되면 표에서 테두리를 그리게 됨
이 속성을 이용하게되면 바깥 테두리 뿐만 아니라 안에 있는 셀 테두리까지 모두 그려지게 됨

2. 태그

border

html5 코드

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

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < /head > < body > 1 < table border = "1" > < tr > < td > 테스트1 < /td > < td > 값1 < /td > < td > 값2 < /td > < /tr > < tr > < td > 테스트2 < /td > < td > 값3 < /td > < td > 값4 < /td > < /tr > < /table > 2 < table style =' margin-top : 20px ; border : 1px solid #000 ' > < tr > < td > 테스트1 < /td > < td > 값1 < /td > < td > 값2 < /td > < /tr > < tr > < td > 테스트2 < /td > < td > 값3 < /td > < td > 값4 < /td > < /tr > < /table > 3 < table style =' margin-top : 20px ; border : 1px solid #000 ' > < tr > < td style =' border : 1px solid #000 ' > 테스트1 < /td > < td > 값1 < /td > < td > 값2 < /td > < /tr > < tr > < td style =' border : 1px solid #000 ' > 테스트2 < /td > < td > 값3 < /td > < td > 값4 < /td > < /tr > < /table > < /body > < /html >

결과 화면

border 사용 예제

코드 설명

1

border = "1"

table에서 표를 생성할 때 테두리를 그리는 방법은 border 라는 속성을 이용하는 것과 css를 사용하는 방법이 있습니다.
1번에서는 border 속성을 이용해 테두리의 그림을 그렸습니다.
css를 활용해 테두리를 그리는 방법보다 선 스타일이나 색깔이나 주기는 힘들지만 바깥쪽 테두리 뿐만 아니라 셀 테두리까지 한번에 그려진다는 점이 장점입니다.
특별한 효과나 스타일이 필요 없을 경우에는 위에서처럼 border 라는 속성을 이용하면 편하게 테두리를 그릴 수 있습니다.

2

border : 1px solid #000

두번째 방법으로는 css를 활용해서 테두리를 그리는 방법입니다.
2번에서 보면 table 태그에 style을 써서 border 라는 스타일을 주었습니다.
여기서 1번과 2번의 차이점을 보게 되면 table에 style을 주었을 경우에는 바깥쪽에 있는 테두리에만 적용이 됩니다.
안에 있는 셀 테두리에는 스타일이 적용되지 않습니다.
그렇기 때문에 각각의 테두리에 따로 선 스타일을 줄 수 있는 장점이 있지만 한편으로는 따로 적용을 해주어야 하기 때문에 좀 더 번거로운 부분도 있습니다.

3

border : 1px solid blue

3번째를 보게 되면 자신이 원하는 셀 테두리에만 선을 그린 것을 확인하실 수 있습니다.
테스트 라는 이름에만 테두리 선을 그리고자 할 경우에는 이렇게 따로 설정을 할 수가 있습니다.
1번에서 사용하는 border라는 태그의 사용할 때의 장단점이 있고 2번과 3번도 마찬가지로 css를 이용하여 테두리를 그릴 때도 장단점이 있습니다.
개인의 필요에 따라 거기에 맞게 태그를 가져다 쓰시면 좋을거 같습니다.