elemento de la tabla
Formar la base
etiquetas de tabla: mesa
tr: 行
td: 单元格
border="设置边框"
bordercolor="边框颜色"
cellspacing="单元格边框与边框之间的距离"
cellpadding="单元格与内容之间的距离"
注意: 给table添加
width="宽度"
height="高度"
colspan="合并列" 左右合并
rowspan="合并行" 上下合并
注意: 给td添加,合并几个,数字写几
align="水平位置"
left 在左边
center 在中间
right 在右边
valign="垂直对齐方式"
top 顶部对齐
middle 居中(默认值)
bottom 底部对齐
Caso Forma:
<table border="1" width="500" height="300" cellspacing="10" cellpadding="0" bordercolor="red" align="center"
valign="top">
<tr align="center">
<td>1-1</td>
<td>1-2</td>
<td colspan="2">1-3</td>
</tr>
<tr>
<td align="right">2-1</td>
<td>2-2</td>
<td valign="top">2-3</td>
<td>2-4</td>
</tr>
<tr valign="top">
<td>3-1</td>
<td rowspan="2">3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
representaciones:
forma complementaria
paquete de datos de línea: 1
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
columnas de un paquete de datos: 2
<colgroup span="value"></colgroup>
<!--span属性为把几列分为一组-->
3: Encabezado de columna
<th></th>
4: Tabla título
<caption></caption>
Propiedades de la tabla
1, célula espaciamiento: espaciado de borde: valor;
Descripción: separación de la célula (el atributo debe ser añadido a la tabla) representa la distancia entre los bordes de la celda, negativo indeseable
2, se fusiona bordes de las celdas adyacentes: border-collapse: separada / colapso;
Descripción: Merges borde de celda adyacente (que debe ser añadido a la tabla de atributos) separar (marco por separado) predeterminado; Collapse (frontera combinado)
3, no se proporciona ningún contenido de la celda: empty-cells: mostrar / ocultar;
Definiciones: cuando ninguna celda de contenido, si la zona de borde de celda; Mostrar: Display; piel: piel;
4, la célula de visualización en una fila y el algoritmo (velocidad de correr más rápido) columna: table-layout: auto / fijo;
Existen varios tipos de mesa
mesa de propiedad pública:
* {
margin: 0;
padding: 0;
}
table {
margin: 20px auto;
width: 300px;
height: 200px;
border-collapse: collapse;
text-align: center;
}
forma delgada
<!-- 细线表格 -->
<table class="tab1">
<caption>
细线表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab1 tbody tr td {
border: 1px solid #000;
}
forma delgada marco grueso
<table class="tab2">
<caption>
粗框细线表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab2 {
border: 5px solid #000;
}
doble mesa
<table class="tab3">
<caption>
双线表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab3 {
border: 5px double #000;
}
.tab3 tbody tr td {
border: 1px solid #000;
}
Palacio palabra celosía
<table class="tab4">
<caption>
宫字格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab4{
border-collapse: separate;
border-spacing: 20px;
}
.tab4 tbody tr td {
border: 1px solid #000;
}
forma de una sola línea
<table class="tab5">
<caption>
单线表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
</table>
.tab5 tbody tr td {
border-bottom: 1px solid #000;
}
forma de calendario
<table class="tab6">
<caption>
日历表格
</caption>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td></td>
</tr>
</tbody>
</table>
.tab6 {
border: 5px solid #ccc;
border-collapse: separate;
border-spacing: 5px;
/*隐藏无内容单元格*/
empty-cells: hide;
padding: 10px;
}
.tab6 tbody tr td {
background-color: skyblue;
}
