<table> 태그 작성법에서 배울 때 border 속성은 표의 굵기를 지정하는 역할이라고 했습니다.
(표 색상은 bordercolor)
table 태그, tr 태그, th 태그, td 태그와 table 속성 정리
html에서 border 속성 사용 예:
<table border="1" bordercolor="red"> <tr> <td>번호</td> <td>이름</td> </tr> </table>
|
실행 화면:
| 번호 | 이름 |
[CSS에서 border 속성 사용하는 법]
CSS란? (HTML과 CSS의 차이, CSS 작성법)
css에서 border 속성 사용법은 조금 다릅니다
<table style="border:1px solid red;">
|
border: 선 너비, 선 모양, 선 색상; 을 한꺼번에 지정하고, 특히 선 모양은 꼭 지정해야 합니다.
1. 선 두께 (border-width) : 픽셀로 지정하거나, thin, medium, thick
더보기
2. 선 모양(border-style) : none, dotted, dashed, solid, double, groove, ridge, inset, outset
더보기
3. 선 색상(border-color) : 색상 이름이나, rgb, 또는 색상코드로 지정 가능
red 또는 #FF0000
위에서 배운 것을 바탕으로 실제로 어떻게 쓰이는지 확인해 볼게요
사용 예(inline에서 스타일 적용)
<table> <tr> <td style="border:1px solid red;">번호</td> <td style="border:1px solid red;">이름</td> </tr> </table>
|
사용 예(internal 스타일 적용)
<html> table, td { border: 1px solid red; } </style> </head>
<body> <table> <tr> <td>번호</td> <td>이름</td> </tr> </table>
</body> </html> |
실행 화면:
| 번호 | 이름 |
[boder 두께, 선 모양, 색상 따로 지정 하기]
border: 두께, 선 모양, 색상 을 한꺼번에 지정할 수도 있고, 각각 따로 지정할 수도 있어요.
하지만 꼭 border-style(선 모양)은 항상 같이 지정해야 합니다. 그렇지 않으면 올바로 선이 나오지 않습니다
사용 예:
border:5px solid;
border:solid red;
[border 위, 오른쪽, 아래, 왼쪽 스타일 지정 따로 하기]
선의 위, 오른쪽, 아래, 왼쪽의 스타일, 색상, 굵기를 따로 지정할 수도 있어요
사용 예 :
border-top: 5px dashed green;
border-right: 5px solid blue;
border-bottom: 5px dotted red;
border-left: 5px double black;
이때 역시 선 모양(border-style)은 필수로 지정해주어야 합니다
실해 화면 :
출처: http://aboooks.tistory.com/77 [지구별 안내서]
'IT기술 > html' 카테고리의 다른 글
| table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 (0) | 2017.03.23 |
|---|---|
| text-align 속성으로 정렬하기 (left, right, center, justify) (0) | 2017.03.23 |
| html/css div 정렬하기 (왼쪽 정렬, 오른쪽 정렬, 가운데 정렬) (0) | 2017.03.23 |
| 네이버 스마트에디터 설치하기 (0) | 2016.08.29 |
| name과 id의 차이점 (0) | 2016.04.29 |
