Introducción 2. Tabla HTML

Tabla HTML

Contenido principal:
comprender los escenarios de aplicación de la
tabla, la estructura básica de la tabla,
cómo operar la
tabla, las propiedades de la
tabla y la tabla entre filas y columnas
.

Tabla HTML de visualización de datos

<table border="1">表格
	<caption></caption>表格标题，居中显示
	<thead>
	<tr>行
		<th>表格头，内容居中，加粗显示</th>
	</tr>
	</thead>
	<tbody>
	<tr>行
		<td>单元格</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>行
		<td>单元格</td>
	</tr>
	</tfoot>
</table>

Tabla con estructura La tabla se
divide en tres partes: encabezado, cuerpo y notas
al pie thead: el encabezado de la tabla (poner títulos y otro contenido)
tbody: el cuerpo del formulario (poner el cuerpo de datos)
tfoot: el pie del formulario (poner las notas al pie del formulario)

表格属性
width  		  pixels,%  		 规定表格的宽度
align  		  left,center,right  表格相对周围元素的对齐方式
border 		  pixels    		 规定表格边框的宽度
Bgcolor  	  rgb(x,x,x) #xxxxxx,colorName   背景颜色
cellpadding   pixels,%   		单元边沿与其内容之间的空白
cellspacing   pixels,%   		单元格之间的空白
frame   	  属性值    			规定外侧边框的哪个部分可见
rules  		  属性值   			规定内侧边框的哪个部分可见


tr标签属性
bgcolor   colorName  #xxx  rgb(x,x,x)

跨列属性colspan ="2"
跨行属性rowspan ="2"

表格嵌套
嵌入表格说明：1要有完整表格结构，2要放在<td>标签中

3. Caso de diseño

<table width="100%" bgcolor="#f2f2f2">
	<caption></caption>表格标题，居中显示
	<thead>
	<tr height="80px" bgcolor="red">行
		<td width="240px" bgcolor="blue" valign="top">
			<table border="1">表格
				<tr>行
					<th>表格头，内容居中，加粗显示</th>
				</tr>
				<tr>行
					<td>单元格</td>
				</tr>
			</table>
		</td>
	</tr>
	</thead>
	<tbody>
	<tr height="20px" bgcolor="red">行
		<td>单元格</td>
	</tr>
	</tbody>
	<tfoot>
	<tr height="180px" bgcolor="red">行
		<td>单元格</td>
	</tr>
	</tfoot>
</table>

Cuando el diseño de la página de la tabla,Sin bordes, Al igual que el diseño de la estructura de la página web.

Suma del ancho de la celda = ancho de la tabla

MOOK: curso masivo abierto en línea

Resumen:
1 Use la menor cantidad de tablas anidadas como
sea ​​posible.2 Use la menor tabla posible para cruzar filas y columnas, de lo
contrario aumentará el costo de mantenimiento general del código

Sintaxis básica de la tabla HTML y
tabla de estructura
con encabezado th tabla con título tabla
con estructura thead tbody tfoot
atributos de la tabla ancho del borde relleno de celdas espacio entre celdas bgcolor
colspan atributos de columnas cruzadas rowpan atributos de filas cruzadas

Siguiente:
Formar páginas web, el uso de varios elementos de formulario, atributos y contenido de interacción de formulario ...