CSS 테이블
CSS를 사용하면 HTML 테이블의 모양을 크게 개선할 수 있습니다.
| 회사 | 연락하다 | 국가 |
|---|---|---|
| 알프레드의 먹이통 | 마리아 안데르스 | 독일 |
| Berglund의 슈퍼마켓 | 크리스티나 베르글룬드 | 스웨덴 |
| 몬테주마 쇼핑센터 | 프란시스코 창 | 멕시코 |
| 진지한 거래 | 롤랑 멘델 | 오스트리아 |
| 섬 무역 | 헬렌 베넷 | 영국 |
| 왕실 음식 | 필립 크레이머 | 독일 |
| 웃는 박카스 포도주 저장고 | 요시탄나무리 | 캐나다 |
| 수집 식품 창고 | 조반니 로벨리 | 이탈리아 |
테이블 테두리
CSS에서 표 테두리를 지정하려면 border속성을 사용하십시오.
아래 예는 <table>, <th> 및 <td> 요소에 검은색 테두리를 지정합니다.
예시
table, th, td {
border: 1px solid black;
}
전체 너비 테이블
위의 표는 경우에 따라 작게 보일 수 있습니다. 전체 화면(전체 너비)에 걸쳐 있어야 하는 테이블이 필요한 경우 width: 100%<table> 요소에 추가하세요.
예시
table {
width: 100%;
}
이중 테두리
위의 예에서 표에는 이중 테두리가 있습니다. 이는 table 요소와 <th> 및 <td> 요소 모두에 별도의 테두리가 있기 때문입니다.
이중 테두리를 제거하려면 아래 예를 살펴보십시오.
테이블 테두리 축소
속성 은 border-collapse테이블 테두리를 단일 테두리로 축소해야 하는지 여부를 설정합니다.
예시
table
{
border-collapse: collapse;
}
테이블 주위에 테두리만 지정하려면 border<table>에 대한 속성 만 지정하십시오.
예시
table
{
border: 1px solid black;
}