网页设计HTML和css（2）

最新推荐文章于 2021-06-08 17:30:38 发布

weixin_44795592

最新推荐文章于 2021-06-08 17:30:38 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/weixin_44795592/article/details/102554191

版权

表格

表格可以使网页上显示的文字更加整齐，有条理。表格还可以实现网页的布局

一个完整的表格由一对<table>标签来定义。
每个表格均有若干个单元行（由一对<tr>标签定义）组成。 (行 row)
每个单元行由若干个单元格（由一对<td>标签定义）组成。 <th>:字体加粗
表格内的具体信息放置在单元格中。
单元格可以包含文本、图像、列表、段落、表单、水平线以及表格等。

语法：

<table>
  <tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
    …
  </tr>
  …
</table>

<table>标签的常用属性

属性	说明
border	表格的边框的宽度，一般由CSS实现
width	以百分比或像素指定表格的宽度
height	以百分比或像素指定表格的高度
cellspacing	表格中相邻单元格的间距以及单元格外边沿与表格边沿之间的间距。
cellpadding	单元格的边沿和它的内容的间距，一般由CSS实现
colspan	跨列
rowspan	跨行

<thead>、<tbody>、<tfoot>标签

从结构上来看，表格可以分成表头、主体和表尾三个部分，分别使用<thead>、<tbody>、<tfoot>标签来表示。
表头和表尾一张表格只能有一个，而一张表格可以有多个主体。
对于大型的表格来说，应该使<tfoot>出现在<tbody>的前面，这样浏览器在显示数据时，有利于加快表格的显示速度。另外，<thead>、<tbody>、标签内部都必须使用`标签。
使用<thead>、<tbody>、<tfoot>对表格进行结构划分的好处是可以先显示<tbody>的内容，而不必等整个表格下载完成后才能显示。
无论<thead>、<tbody>、<tfoot>的顺序如何改变，<thead>的内容总是在表的最前面，<tfoot>的内容总是在表的最后面。

练习：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>学生信息表</title></head>
<body>
<table width: 60%  cellspacing="2" cellpadding="3"  border="1px">
    <tr>
        <td rowspan="5" style="background-color: darkorange">学生</td>
        <td colspan="6" style="background-color: aqua;color: red">学生信息表
</td>
	</tr>

  <tr style="background-color: salmon">
        <td>序号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>电话</td>
        <td>住址</td>
    </tr>
    <tr style="background-color: darkgray">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td>110</td>
        <td>雁塔</td>
    </tr>
    <tr style="background-color: darkgray">
        <td>2</td>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td>110</td>
        <td>雁塔</td>
    </tr>
    <tr style="background-color: darkgray">
        <td>3</td>
        <td>张三</td>
        <td>男</td>
        <td>23</td>
        <td>110</td>
        <td>雁塔</td>
    </tr>
</table>
</body>
</html>
<!--设置样式属性的两种方式
1.	直接在标签(默认属性)里面写 eg ：  <table  width=”10px”>    
2.	写在style="样式"，style 里面  ， 
 eg :  <table style="background-color: red" >
注意： 第一种方式 属性与值之间 是用 “=”连接的 
       第二种方式  属性与值之间是用 “:” 连接的 
如果第一种方式没有实现样式，可能的原因是该属性不是该标签的默认属性。
解决方法：将该属性移动到style里面试一试（记得注意连接符）

如果第二种方式的某个样式属性没有效果，解决方式：：使用第一种方式试一试
rowspan：跨行
colspan：跨列
 -->

<table width = “60%”>

%表示以浏览器页面的宽度作为基础计算table的宽度，因为table标签外面就是body标签。

<tr width = “50%”> 这个依据父类标签的宽度来计算该标签的宽度。

一般用%设置宽高，只需要在 table标签中设置 width = “50%”。

weixin_44795592

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页设计HTML和css（2）

表格表格可以使网页上显示的文字更加整齐，有条理。表格还可以实现网页的布局一个完整的表格由一对<table>标签来定义。每个表格均有若干个单元行（由一对<tr>标签定义）组成。 (行 row)每个单元行由若干个单元格（由一对<td>标签定义）组成。 <th>:字体加粗表格内的具体信息放置在单元格中。单元格可以包含文本、图像、列表、段落...
复制链接

扫一扫