cellpaddingcell margin
# 🎜🎜 #↑그림과 같이 테이블의 크기는 200*110px
4. 테이블에서 테이블의 속성값을 모두 제거합니다. border: 1px for the table in CSS solid #151515}
↑ 그림과 같이 이때 CSS의 테두리가 다음과 같은 것을 발견했습니다. 실제로는 테이블에 외부 테두리를 추가하기만 하면 됩니다#🎜🎜 #
5. border-collapse: border merge 접기, 이 속성은 테이블의 테두리를 단일 테두리로 병합할지 아니면 표준 HTML처럼 별도로 표시할지를 설정합니다. 이때 테이블 전체에 테두리만 추가하고 여백이나 공백이 필요하지 않은 경우 실제로 다음과 같이 작성하면 됩니다. <style>
table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}
</style>
<table border="1">
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>
표시된 대로↓
# 🎜🎜#
6. 위 그림에서 두 브라우저가 구문 분석한 테두리가 서로 다르다는 것을 확실히 볼 수 있습니다. 그러나 실제로 그들은 동일합니다. 둘 다 동시에 테두리에 색상을 추가했지만 td와 th에는 기본적으로 기본 색상이 있고 기본 검정색 선을 덮기 위해 여기에 스타일을 추가하지 않았기 때문에 이것이 Firefox의 상황으로 이어졌습니다. 사실 이 상황은 Google에서도 볼 수 있지만 명확하지 않습니다. 구문 분석하는 기본 검은색 선은 우리 색상으로 덮여 있습니다. 주의 깊게 살펴보면 현재로서는 검은색 가장자리만 찾을 수 있습니다. th 및 td에 색상 스타일을 추가하려면 그림과 같이 table tr th, table tr td { border-color:#b6ff00; }
↓
7. 위에서, 자세히 보면 여전히 뭔가 잘못된 것을 발견할 수 있습니다. 테두리가 더 깊어진 것 같습니다. 이는 실제로 테이블에 기본 검은색 선 스타일을 추가했기 때문에 처음에 테이블에 border=1을 추가했기 때문입니다. 위에서 말한 th와 td 및 table 모두 기본 검정색 테두리이므로 이 문제를 완전히 해결하고 테두리를 정상적으로 표시하려면 다음과 같이 작성해야 합니다. <style>
table,table tr th, table tr td { border:1px solid #0094ff; }
table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
</style>
<table>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>
요약:
table in Html 속성:
border= “1”: 1픽셀 검정색 테두리를 추가합니다. 전체 테이블(테이블 및 각 셀 포함)은 다음의 CSS와 동일합니다: table,table tr th, table tr td { border:1px solid #0094ff }
cellpadding="0": 셀 여백은 0과 동일하며 기본값은 1px입니다. 이는 다음과 같습니다. {padding: 0;}
cellspacing ="0": 셀 간격은 0과 같고 기본값은 2px입니다. 이는 CSS의 border-collapse:collapse와 동일하지만 Cellspacing은 간격일 뿐이며 border와 동일하지는 않습니다. -collapse는 인접한 가장자리를 하나의 가장자리로 병합하여 셀 간격에서 가장자리가 겹치는 것을 방지합니다. 가장자리가 두꺼워지는 문제가 발생합니다. 따라서 여기서는 html 속성을 사용하여 표 테두리를 설정할 때 셀 간격을 0으로 설정하는 것을 권장하지 않습니다. 0과 같게 하려면 CSS 스타일 속성을 사용하여 표 테두리를 설정하고 border-를 사용하는 것이 좋습니다. 붕괴: 셀 간격을 0으로 설정하는 대신 테두리를 병합하여 겹치는 가장자리가 두꺼워지는 문제를 일으킵니다.