深圳市金黑网络技术有限公司始终坚持以用户需求为导向,提供安全、稳定、高效的产品和服务!
签到 · 搜索导航 · 服务热线 · 微信/手机:17817817816

深圳网站建设

查看: 1050|回复: 0

深圳网站建设之html表格制作教程

[复制链接]

UID
1
贡献
844
金币
1540
主题
520
在线时间
333 小时
注册时间
2022-1-15
最后登录
2024-11-12
QQ
发表于 2022-2-8 14:44:50 | 1050 | 0 | 显示全部楼层 |阅读模式
深圳网站建设之html表格制作教程
1.相关标签
画图说明,table是一个表格的模块,里面有行,光有行不行,里面要有列,在html中不叫列,叫单元格,再有很多行,就组成了表格-------》table标签包含行tr---》再包含单元格td
表格:<table></table>
行:<tr></tr>
单元格:<td></td>
每列的标题:<th></th>
表格标题:<caption></caption>
小案例:
1536114101654.png
案例代码如下:
  1. <!-- 金黑网络 表格的区域,border属性代表边框的意思 -->
  2. <table border="1">
  3.         <!-- 行 -->
  4.         <tr>
  5.             <!-- 单元格 -->
  6.         <td>姓名</td>
  7.         <td>性别</td>
  8.         <td>年龄</td>
  9.     </tr>
  10.     <tr>
  11.             <!-- 单元格 -->
  12.         <td>令狐冲</td>
  13.         <td>男</td>
  14.         <td>22</td>
  15.     </tr>
  16.     <tr>
  17.             <!-- 单元格 -->
  18.         <td>任盈盈</td>
  19.         <td>女</td>
  20.         <td>18</td>
  21.     </tr>
  22.     <tr>
  23.             <!-- 单元格 -->
  24.         <td>任我行</td>
  25.         <td>男</td>
  26.         <td>55</td>
  27.     </tr>
  28.     <tr>
  29.             <!-- 单元格 -->
  30.         <td>岳不群</td>
  31.         <td>男</td>
  32.         <td>50</td>
  33.     </tr>
  34. </table>
复制代码
表格的边框  语法
  1. <table border=1>
  2. </table>
复制代码
注意:border这个属性一定加在table标签上,加在td上不生效
2.对齐方式
a) 水平对齐
语法:align="center/left/right"
深圳网站建设.jpg
b) 垂直对齐
语法:valign="top/middle/bottom"
深圳小程序制作.jpg
3.单元格间距和填充
单元格间距(cellspacing):单元格和单元格距离,默认是2像素
单元格填充(cellpadding):单元格和内容的距离,默认是1像素
深圳网络推广.jpg
4.合并单元格
图示:
深圳小程序app开发.jpg

导入:最后两行的最后两个单元格为照片,需要合并起来,这种合并是上下合并,所以合并的是行。如果是左右合并,那就是合并的列
合并行(rowspan):把不同的行合并起来,写在上面的单元格上面
合并列(colspan):把不同列合并起来,写在左边的单元格上面
取值是数值,需要合并几个单元格就写数字几就行,一旦合并了单元格,就需要将多余的单元格删掉
代码
  1. <table cellspacing="0" cellpading="30" border="1" width="300" height="200">
  2.         <caption><h3>学生证</h3></caption>
  3.     <tr>
  4.             <th align="center" colspan="4">深圳传值黑马程序员</th>
  5.     </tr>
  6.     <tr align="center">
  7.             <td>姓名</td>
  8.             <td>班级</td>
  9.             <td>学号</td>
  10.             <td rowspan="2">照片</td>
  11.     </tr>
  12.     <tr align="center">
  13.             <td>曾真光</td>
  14.         <td>php14期</td>
  15.         <td>007</td>
  16.     </tr>
  17. </table>
复制代码
注意:合并以后一定要把多余的单元格td删掉。

楼主热帖

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表