HTML의 테이블 양식에 테두리를 추가하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML의 테이블 양식에 테두리를 추가하는 방법

青灯夜游

Sep 25, 2018 pm 01:43 PM

html

이 장에서는 HTML의 테이블 양식에 테두리를 추가하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

일반적으로 테이블에 테두리를 추가할 때 다양한 문제가 발생합니다. 다음은 테두리를 추가한 후 테이블을 표시하는 더 좋은 방법입니다.

<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>

로그인 후 복사

그러나 때로는 다른 요구 사항에 따라 다릅니다. 다양한 스타일이 필요합니다. 여기서는 테이블 테두리에 영향을 미치는 요소를 요약하고 분석하겠습니다

테이블 테두리

#🎜🎜 #

HTML의 테이블 양식에 테두리를 추가하는 방법

그림과 같이 border=1 즉, 테이블의 각 셀과 테두리에 1픽셀의 테두리를 추가한다는 뜻입니다

cellspacingcellpacing

HTML의 테이블 양식에 테두리를 추가하는 방법

↑그림과 같이 테이블 크기는 다음과 같습니다. 200 *118px

cellpaddingcell margin

# 🎜🎜 # HTML의 테이블 양식에 테두리를 추가하는 방법 ↑그림과 같이 테이블의 크기는 200*110px

4. 테이블에서 테이블의 속성값을 모두 제거합니다. border: 1px for the table in CSS solid #151515}

HTML의 테이블 양식에 테두리를 추가하는 방법 ↑ 그림과 같이 이때 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 모두 기본 검정색 테두리이므로 이 문제를 완전히 해결하고 테두리를 정상적으로 표시하려면 다음과 같이 작성해야 합니다.

HTML의 테이블 양식에 테두리를 추가하는 방법

<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으로 설정하는 대신 테두리를 병합하여 겹치는 가장자리가 두꺼워지는 문제를 일으킵니다.

위 내용은 HTML의 테이블 양식에 테두리를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.