前端学习- 常用标签（table表格与form表单）

最新推荐文章于 2023-09-11 22:32:58 发布

此鱼非闲鱼也

最新推荐文章于 2023-09-11 22:32:58 发布

阅读量898

点赞数 1

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/m0_45315697/article/details/104016311

版权

本文详细介绍了HTML中的表格元素，包括表格的基本结构、单元格合并以及相关属性。接着讲解了表单的用途、不同类型的表单控件、属性设置以及提交方式，强调了POST请求的适用场景。

摘要由CSDN通过智能技术生成

1、表格

<table></table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
<tr> 元素定义表格行，
<th> 元素定义表头(如果有需要的话，表格的第一行替代所有的td),
td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 <caption></caption>( 表格的标题,写在table之中，tr之前)、、、<thead></thead>、<tfoot></tfoot> 以及 <tbody></tbody>(tbody标签即使没有在html文件中书写，在浏览器页面查看源代码时，显示已经将tbody自动添加到table中了 ) 元素。

合并单元格：
rowspan : 垂直合并（跨行）,在当前行，自身多占了一个单元格
clospan: 水平合并（跨列），占用了下一行的一个单元格

<table>
  <tr>
     <!--第一行的第一个单元格多占了一个单元格，占了横向的两个单元格的空间-->
     <td rowspan ="2">语文</td>
     <td>数学</td>
     <td>英语</td>
  </tr>
  <tr>
     <!--第二行的第一个单元多占了下一行的一个单元格，占了纵向两个单元格-->
     <td colspan ="2"></td>
     <td></td>
     <td></td>
  </tr>
</table>

注意：合并的本质不是侵占，而是给自身添加了位置。

table的属性：

 <table border="边框宽度" bordercolor="边框颜色" cellspacing="内框宽度值" cellpadding="文字与边框距离值"></table>

 <table bgcolor="背景颜色" background="背景图像地址"></table>

表格的行属性：

<tr height="行的高度" bgcolor="背景颜色" background="背景图片"  align="文字水平对齐方式" valign="文字垂直对齐方式"></tr>

<tr>的valign属性用来控制表格当前行的垂直对齐方式。
垂直对齐方式有3种，分别是：
向上对齐 top
居中对齐 middle（center）
向下对齐 bottom

表格的单元格属性：

<td width="单元格宽度" height="单元格高度" bordercolor="边框的颜色"  bgcolor="背景颜色"   
background="背景图片" align="文字水平对齐方式"  valign="文字垂直对齐方式">
</td>

综合实例

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
      table{
   
      	width: 600px;
	    text-align: center;
	  }
	  td{
   
		  white-space: nowrap;
	  }
	</style>
</head>
<body>
<table border="1px" cellspacing="0">
	<tr>
		<th colspan="9">苍南乐果包装生产计划单</th>
	</tr>
	<tr>
		<td>客户名称</td>
	    <td colspan="2"></td>
	    <td>订货日期</td>
	    <td colspan="2"></td>
	    <td>编号</td>
	    <td colspan="2"></td>
	</tr>
    <tr>
		<td>产品名称</td>
	    <td colspan="3"></td>
	    <td>交货日期</td>
	    <td colspan="4"></td>
	</tr>
	<tr>
		<td>订货数量</td>
	    <td colspan="3"></td>
	    <td>数量控多</td>
	    <td>最多</td>
	    <td></td>
	    <td>最少</td>
	    <td width="50px"></td>
	</tr>
	<tr>
		<td>条形码<

最低0.47元/天解锁文章

此鱼非闲鱼也

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习- 常用标签（table表格与form表单）

1、表格<table></table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。<tr> 元素定义表格行，<th> 元素定义表头(如果有需要的话，表格的第一行替代所有的td),td 元素定义表格单元。更复杂的 HTML 表格也可能包括 <caption&gt...
复制链接

扫一扫

专栏目录