Heim > Web-Frontend > HTML-Tutorial > html中如何让table显示的更好_html/css_WEB-ITnose

html中如何让table显示的更好_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:17:36
Original
941 Leute haben es durchsucht

在html文件编写中,经常使用到table来做一些表格。如何让它显示的更像一张表格?接下来为你讲解。

基本格式

<div>            <th>我的一张表格</th>            <table border="1">                <tr>                    <th>姓名</th>                    <th>年龄</th>                    <th>班级</th>                </tr>               <tr>                    <td>张山</td>                    <td>20</td>                    <td>计算机1班</td>                </tr>            </table></div>
Nach dem Login kopieren

显示效果如下:

看起来显得有点挤,让他的宽度增加就是设置table的width属性。想让单元格之间是一条实线分割,设置table的cellspacing=0。想让单元格中的内容和单元格边框距离为0,设置table的cellpadding=0.想要每个单元格的高度增大一点,可以在每个标签中设置height=40属性。

<div>            <th>我的二张表格</th>            <table border="1" cellspacing="0" cellpadding="0" width="400" >                <tr>                    <th>姓名</th>                    <th>年龄</th>                    <th>班级</th>                </tr>               <tr>                    <td height="40">张山</td>                    <td >20</td>                    <td >计算机1班</td>                </tr>            </table>        </div>
Nach dem Login kopieren

显示效果如下:

显然数据都在最左端,想要文字显示在中间,可以设置td的align属性。

<div>            <th>我的三张表格</th>            <table border="1" cellspacing="0" cellpadding="0" width="400">                <tr>                    <th>姓名</th>                    <th>年龄</th>                    <th>班级</th>                </tr>               <tr>                    <td align="center"  height="40">张山</td>                    <td align="center">20</td>                    <td align="center">计算机1班</td>                </tr>            </table>        </div>
Nach dem Login kopieren

显示效果如下:

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage