Maison > interface Web > tutoriel HTML > html中如何让table显示的更好_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:17:36
original
942 Les gens l'ont consulté

在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>
Copier après la connexion

显示效果如下:

看起来显得有点挤,让他的宽度增加就是设置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>
Copier après la connexion

显示效果如下:

显然数据都在最左端,想要文字显示在中间,可以设置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>
Copier après la connexion

显示效果如下:

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal