在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>
jQuery 添加新内容有以下四个方法：append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
一．表格表格就是用来表示一些格式化的数据的，在网页里也可以创建表格
1，使用table标签创建表格
2，使用tr表示表格一行，有几行有几个tr
3，在tr中使用td来创建单元格，有几个单元格就有几个td
4，表格创建默认没有边框
5，用css来创建单元格或者在table里面加borde=“1”（不常用）
6，在table里加width=“40%”表示在窗口里宽度占40%
7，合并两个单元格：先删除其中一个单元格，然后让另一个格占领两个位置，在td中加入colspan=“2”，row用来纵向合并单元格
8，table和td边框之间默认有一个距离，通过border-spaceing属性可以设置这个距离
9，border-collapse可以用来设置表格合并，此时border自动失效
10，th是特殊的td，表标题
11，tr:nth-child(even){background-color: #bfa}可以给偶数行设绿色背景
12，tr:hover{background-color: #ff0}可以是鼠标指定行背景变黄色
13，表头，表格主体，表格底部分别为thead,tbody,tfoot。表头，表格主体，表格底部不管什么情况都永远分别显示在头部，中部，底部。
14，如果表格中没有tbody，浏览器会自动在表格中添加tbody，并且将所有tr都放到tbody中，所以tr不是table的子元素，而是tbody的子元素。
错
对
15，表格可以给页面布局，但是不常用，被css所淘汰。
二，表单
1，表单的作用就是用来将用户的信息提交给服务器的。
2，使用form标签创建一个表单，form标签必须指定一个action属性，该属性指向的是一个服务器的地址，但我们提交表单时将会提交到action属性对应的地址。
3，使用form创建的是一个空白的表单，我们还需要添加不同的表单项。
4，使用input来创建一个文本框，他的type属性是text，如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性，name表示提交内容的名字
5，提交按钮可以将表单中的信息提交给服务器，使用input创建一个提交按钮，它的type属性值是submit，提交按钮可以通过value属性来指定按钮上的文字
6，使用input创建一个密码框，它的type属性是password
7，使用input来创建一个单选按钮，它的type属性使用radio，单选按钮通过name进行分组，name属性相同是一组按钮，还需要指定一个value属性，这样被选中的表单项会以value属性值提交给服务器。
8，使用input创建一个多选框，它的type属性使用checkbox，记得加name和value
9，使用select来创建一个下拉列表，在下拉列表中使用option标签来创建一个一个列表项，下拉列表的name属性要指定给select，而value的值要指定给option。
10，如果希望在单选按钮或者是多选框中指定默认的选项，添加checked属性
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）