html如何给table表单加边框-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

html如何给table表单加边框

青灯夜游

Sep 25, 2018 pm 01:43 PM

html

本章给大家介绍html如何给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>

Salin selepas log masuk

但是根据不同的需要有时候我们需要不同的样式，在这里我就影响表格边框的因素，做一些总结和分析

一、

表格边框

如↑图，也就是border=1，意思就是给表格的每一格，及边框加上1像素的边框

二、

cellspacing单元格间距

如↑图，这时表格大小为：200*118px

三、

cellpadding单元格边距

如↑图，这时表格大小为：200*110px

四、去掉表格中table的所有属性值，当在css中给table设置{border: 1px solid #151515}

如↑图，这个时候我们发现，css中的border其实就是给表格加了一个外边框而已

五、border-collapse: collapse 边框合并，该属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 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>

Salin selepas log masuk

如图↓

六、我们在上面的图中可以清晰看见，两个浏览器所解析边框不同。但是其实他们是一样的。他们同时都给边框加了颜色，但是由于我们td和th默认有一个默认的颜色，而我们这里没有给他们添加样式去覆盖默认的黑色线条，而导致了火狐中出现的情况，其实这个情况在谷歌中也有，只是不明显，其解析的黑色默认线条被我们的颜色盖在了上面，你如果仔细查看还是会发现有黑色边条出现，这个时候我们只需要给th和td加上颜色样式即可

 table tr th, table tr td { border-color:#b6ff00; }

Salin selepas log masuk

如图↓

七、从上面，仔细看，其实还是会发现不对劲，谷歌似乎外边框更深了，这其实还是因为，我们一开始在table上面加了border=1的原因，因为本身就给table加了一个默认的黑色线条样式，就是我们上面说的，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>

Salin selepas log masuk

总结一下：

Html中table的属性：

border= “1”：给整个表格（包括表格及每一个单元格）加上1像素的黑色边框，其等同于css中的： table,table tr th, table tr td { border:1px solid #0094ff; }

cellpadding=“0”：单元格边距等于0，其默认值为1px，其等同于css中的：{padding：0;}

cellspacing="0"：单元格间距等于0，其默认值为2px，其等同于css中的：border-collapse: collapse（边框合并），但又不完全相同，cellspacing仅间距，而border-collapse使临近的边线合并成一条边线，也就避免了cellspacing中边线重合造成边线加粗的问题。所以在这里不提倡使用html属性设置表格边框时将cellspacing设置为0，，如果你希望他等于0，更提倡使用css样式属性的方法去设置表格的边框，并使用border-collapse: collapse去合并边线，而不是将cellspacing设置为0，造成重合边线加粗的问题。

Atas ialah kandungan terperinci html如何给table表单加边框. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Arahan sembang dan cara menggunakannya

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7522

Tutorial CakePHP

1378

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles