Utilice la Tabla de elementos

Crear una tabla utilizando el elemento de la tabla

elemento de la tabla tiene los siguientes atributos comunes

propiedad significado
frontera Establecer el ancho borde de la tabla
anchura Ajuste el ancho de la tabla
altura Ajuste la longitud de la tabla
cellpadding El relleno poner la mesa
cellspacing Establecer los márgenes de mesa

en el interior del elemento de la tabla

elemento significado
subtítulo título de la tabla
º nombre de la tabla
tr fila de la tabla
td célula
thead mesa principal distinguido
tbody La principal distinción entre la mesa
tfood Distinción parte inferior de la tabla
colgroupp, col Del día diferentes columnas de estilo de color

Propiedad elemento td

propiedad significado
colspan Conjunto interbancaria celular
rowspan Conjunto de células en las columnas

Ejemplo:

<div style="margin: 30px 500px auto;text-align: center">
    <table border="1" width="300" >
        <thead>
             <caption>职业调查</caption>
             <th colspan="3">详情表</th>
        </thead>
        <tbody>
             <colgroup>
                  <col bgcolor="#f79d03">
                  <col bgcolor="#ffd4f5">
                  <col bgcolor="e80063">
            </colgroup>
            <tr>
                  <td>姓名</td>
                  <td>职业</td>
                  <td>性别</td>
            </tr>
            <tr>
                   <td>小明</td>
                   <td>学生</td>
                   <td></td>
            </tr>
            <tr>
                  <td>张三</td>
                  <td>教师</td>
                  <td></td>
            </tr>
             <tr>
                   <td>静静</td>
                   <td>教师</td>
                   <td></td>
             </tr>
        </tbody>
        <tfoot>
             <tr>
                   <td colspan="3">总计3人</td>
             </tr>
        </tfoot>

    </table>
</div>

resultado

Aquí Insertar imagen Descripción

Dentro y fuera de la mesa no es los márgenes predeterminados combinados para formar una necesidad de un solo cuadro para uso

border-collapse: colapso valores de atributos

Ejemplo:

<style>
        table,td{
            border: 1px solid #0D9AFE;
        }
        table{
            width: 1000px;
            height: 400px;
            /*border-collapse: collapse属性,用于合并表格边框*/
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
            background-color: #1f79a7;

        }
</style>
<body>
     <table>
         <tr>
             <td colspan="5">学生管理信息表</td>
         </tr>
         <tr>
             <td >id</td>
             <td>姓名</td>
             <td>年龄</td>
             <td>性别</td>
             <td>爱好</td>
         </tr>
         <tr>
             <td>id</td>
             <td>姓名</td>
             <td>年龄</td>
             <td>性别</td>
             <td>爱好</td>
         </tr>
     </table>
</body>
resultados La Figura

Aquí Insertar imagen Descripción

Publicado 39 artículos originales · alabanza ganado 13 · vistas 2325

Supongo que te gusta

Origin blog.csdn.net/qq_43205282/article/details/103392905
Recomendado
Clasificación