html的table复杂布局

html的table复杂布局,第1张

table的布局主要是利用 tr(行) 和 td(列)。布局是行(tr)开始开展,从上到下进行 行 的布局,从左到右进行 列 的布局。

第一行:

第二行:

按照这个思路进行就可以了。

可能注意到了,每一行td中都添加了colspan,这是为了出现 运维支持 (这一列)边框线与上面错开的样式,当然要这样使用colspan,你要保证每一行的 colspan数相加的和相同。

如有错误,欢迎指正。

在HTML中,使用table标签来创建一个表格

在table标签中使用tr来表示表格中的一行,有几行就有几对tr

在tr中需要使用td来创建一个单元格,有几个单元格就有几个td

....................................................................................................................................

 rowspan用来设置纵向的合并单元格 

....................................................................................................................................

 colspan横向的合并单元格 

....................................................................................................................................

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>表格</title>

</head>

<body>

<!-- 在HTML中,使用table标签来创建一个表格 -->

<table border="1" width="40%" align="center">

<!-- 在table标签中使用tr来表示表格中的一行,有几行就有几对tr -->

<tr>

<!-- 在tr中需要使用td来创建一个单元格,有几个单元格就有几个td -->

<td>A1</td>

<td>A2</td>

<td>A3</td>

<td>A4</td>

</tr>

<tr>

<td>B1</td>

<td>B2</td>

<td>B3</td>

<!-- rowspan用来设置纵向的合并单元格 -->

<td rowspan="2">B4</td>

</tr>

<tr>

<td>C1</td>

<td>C2</td>

<td>C3</td>

</tr>

<tr>

<td>D1</td>

<td>D2</td>

<!-- colspan横向的合并单元格 -->

<td colspan="2">D3</td>

</tr>

</table>

</body>

</html>

............................................................................................................................................................................

table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离

......................................................................................................................................

border-collapse可以用来设置表格的边框合并

如果设置了边框合并,则border-spacing自动失效

...............................................................................................................................................................................

设置隔行变色

...........................................................................................................................................................................

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>表格</title>

<style type="text/css">

table{

/*设置表格的宽度*/

width: 300px

/*居中*/

margin: 0 auto

/*边框*/

            /*border:1px solid black*/

            /*table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离*/

            border-spacing: 10px

            /*

            border-collapse可以用来设置表格的边框合并

            如果设置了边框合并,则border-spacing自动失效

            */

            border-collapse: collapse

            /*设置背景样式*/

/*background-color: #bfa*/

}

/*设置边框*/

th, td{

border: 1px solid black

}

/*设置隔行变色*/

tbody >tr:nth-child(even){

background-color: #bfa

}

/*鼠标移入到tr以后,改变颜色*/

tr:hover{

background-color: yellow

}

</style>

</head>

<body>

<table>

<tr>

<!--

可以使用th标签来表示表头中的内容,

它的用法和td一样,不同的是它会有一些默认效果

-->

<th>学号</th>

<th>姓名</th>

<th>性别</th>

<th>住址</th>

</tr>

<tr>

<td>1</td>

<td>孙悟空</td>

<td>男</td>

<td>花果山</td>

</tr>

<tr>

<td>2</td>

<td>猪八戒</td>

<td>男</td>

<td>高老庄</td>

</tr>

<tr>

<td>3</td>

<td>沙和尚</td>

<td>男</td>

<td>流沙河</td>

</tr>

<tr>

<td>4</td>

<td>唐僧</td>

<td>男</td>

<td>女儿国</td>

</tr>

<tr>

<td>1</td>

<td>孙悟空</td>

<td>男</td>

<td>花果山</td>

</tr>

<tr>

<td>2</td>

<td>猪八戒</td>

<td>男</td>

<td>高老庄</td>

</tr>

<tr>

<td>3</td>

<td>沙和尚</td>

<td>男</td>

<td>流沙河</td>

</tr>

<tr>

<td>4</td>

<td>唐僧</td>

<td>男</td>

<td>女儿国</td>

</tr>

<tr>

<td>1</td>

<td>孙悟空</td>

<td>男</td>

<td>花果山</td>

</tr>

<tr>

<td>2</td>

<td>猪八戒</td>

<td>男</td>

<td>高老庄</td>

</tr>

<tr>

<td>3</td>

<td>沙和尚</td>

<td>男</td>

<td>流沙河</td>

</tr>

<tr>

<td>4</td>

<td>唐僧</td>

<td>男</td>

<td>女儿国</td>

</tr>

<tr>

<td>1</td>

<td>孙悟空</td>

<td>男</td>

<td>花果山</td>

</tr>

<tr>

<td>2</td>

<td>猪八戒</td>

<td>男</td>

<td>高老庄</td>

</tr>

<tr>

<td>3</td>

<td>沙和尚</td>

<td>男</td>

<td>流沙河</td>

</tr>

<tr>

<td>4</td>

<td>唐僧</td>

<td>男</td>

<td>女儿国</td>

</tr>

<tr>

<td>1</td>

<td>孙悟空</td>

<td>男</td>

<td>花果山</td>

</tr>

<tr>

<td>2</td>

<td>猪八戒</td>

<td>男</td>

<td>高老庄</td>

</tr>

<tr>

<td>3</td>

<td>沙和尚</td>

<td>男</td>

<td>流沙河</td>

</tr>

<tr>

<td>4</td>

<td>唐僧</td>

<td>男</td>

<td>女儿国</td>

</tr>

<tr>

<td>1</td>

<td>孙悟空</td>

<td>男</td>

<td>花果山</td>

</tr>

<tr>

<td>2</td>

<td>猪八戒</td>

<td>男</td>

<td>高老庄</td>

</tr>

<tr>

<td>3</td>

<td>沙和尚</td>

<td>男</td>

<td>流沙河</td>

</tr>

<tr>

<td>4</td>

<td>唐僧</td>

<td>男</td>

<td>女儿国</td>

</tr>

</table>

</body>

</html>

...........................................................................................................................................................................

有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部

在HTML中为我们提供了三个标签:

这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中

如果表格中没有写tbody,浏览器会自动在表格中添加tbody

并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素

通过table >tr 无法选中行 需要通过tbody >tr

...........................................................................................................................................................................

以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了

表格的列数由td最多的那行决定

表格是可以嵌套,可以在td中在放置一个表格

.............................................................................................................................

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>表格的布局</title>

</head>

<body>

<table border="1" width="100%">

<tr height="100px">

<td colspan="2"></td>

</tr>

<tr height="400px">

<td width="20%"></td>

<td width="80%">

<table border="1" width="100%" height="100%">

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

</table>

</td>

</tr>

<tr height="100px">

<td colspan="2"></td>

</tr>

</table>

</body>

</html>

如果你一定要用table去实现,就是大量的table标签嵌套table,然后不断的嵌套,针对每个单元格、标签进行控制

然后提一句,从2007年开始,整个前端开发(HTML5开发)、网页制作的制作规范,行业当中就是使用HTML+CSS的模式进行(也称为DIV+CSS),其原因在于table的语义性、可维护性都比较差,从语义的角度来说,table是表格,也就是呈现数据的数据表,并非网页布局的东西。

对于很多学校、大学的官网,由于是2005年左右的一系列产品,所以,会采用table的布局方式。如果你是在制作学校的某一个网页,在维护学校,那你没的选择,只能按我第一段说的那么去 *** 作,虽然麻烦~如果你是在自学HTML和CSS,在拿学校的页面做练习,那么一定以“行业规范”为准,选择好的合适的书籍辅助学习。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6195934.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存