表格标签

一、<table>

<table>代表表格标签。   <table></table>

1.width  表示表格宽度,宽度表达方式有像素和百分比两种。网页设计时如果按照像素来设计网页宽度,当网页窗口缩小时,网页大小不会随着窗口的缩小而变化,而会出现上下和左右拉伸条,以观看网站的全部内容。网站设计时如果按照百分比设计网页宽度,网页全局会随着可视窗口的变化而变化。

<table width="100%" >表示此表格宽度以百分比表达,宽度100%表示网页有多宽此表格就有多宽。

2.border   表示边框粗细    <table border="0">   表示边框宽度为零,也可理解为没有边框。

3.cellspacing  单元格的边距    <table cellspacing="0" > 边距是单元格里单元格内容与单元格外框之间的距离,如果不为0,则单元格里的内容不会触碰到单元格的边,会保持一定距离

4.cellpadding  单元格间距    <table cellpadding="0">间距是单元格和单元格之间的距离,是单元格距离四周的单元格的垂直距离。

5.bordercolor  边框颜色  <table bordercolor="#33FFCC"> 边框颜色是单元格边框的颜色

二、<tr>   代表行

<table width="100%" border="0" cellspacing="0" cellpadding="0" bordercolor="#33FFCC">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
  </tr
<table>

表示1个表格有1行4列

三、<td>  代表单元格

1.width  单元格的宽度

2.height  单元格的高度

3.align  水平对齐方式  ①left左对齐    ②right右对齐  ③center居中对齐

4.valign 垂直对齐方式  ①top靠上    ②bottom靠下  ③middle中间     垂直对齐方式的居中和水平对齐方式的居中不一样。

5.rowspan 合并单元格(合并行)

<tr>
  <td rowspan="2">&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>

   上段代码表示4行4列的表格里,合并第2/3行的第1列。第2行中多出rowspan="2",表示合并了2行,第3行相应的显示少了1个单元格。

6.colspan 合并单元格(合并列)   列的合并和行的合并原理一样。

四、<th>做表头的(第一行),一般不会用到。

表格标签(table、行、列、表头)的更多相关文章

  1. 透明、圆角、阴影效果、背景色渐变、<a></a>去外层虚线、!!!表格标签<table>

    表格标签 <table> 代表表格 width:指表格的宽度           一种是像素 (浏览器缩小的时候出现滚动条)           一种是百分比(跟着浏览器的大小而大小) b ...

  2. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

  3. 关于html与css的标签及属性(text文本属性、背景background属性、表格标签table、列表、)

    text文本属性1.颜色 colorcolor:red: 2.文本缩进text-indant属性值 num+px text-indant:10px:3.文本修饰 text-decoration属性值: ...

  4. HTML+css基础 表格标签table Table标签属性 td标签属性

    表格标签table:   他是由行与列构成,最小单位是单元格. 行标签  <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...

  5. html5 表格标签 table tr td

      最重要的三个 <table>     表格声明标签 属性: boarder    边框粗细 style    可配合css 使用 <tr>    行标签 table row ...

  6. 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器

    转:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html <!DOCTYPE html PUBLIC "-//W3C ...

  7. HTML的表格标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. HTML常用标签与表格标签

    超链接标签: <a href="超链接地址" target="_blank">超链接的文字</a> _blank或new是在新网页中打开 ...

  9. PHP入门 - - 06-->HTML的表格标签

    表格标签<table> <table>的属性: Align: left, center, right          (表格的)位置 Border:              ...

  10. 一天搞定CSS:表格(table)--19

    1.表格标签 表格标签的嵌套关系 <table> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列 ...

随机推荐

  1. PAT---福尔摩斯约会时间

    主要为字符串的处理,注意读懂题目意思. 设置输出域宽和填充字符的函数分别为setw(int n),setfill(char c);两个函数的头文件为#include<iomanip>; # ...

  2. PAT 1085 PAT单位排行 (Microsoft_zzt)

    https://pintia.cn/problem-sets/994805260223102976/problems/994805260353126400 每次 PAT 考试结束后,考试中心都会发布一 ...

  3. 微信Web开发者工具-下载、安装和使用图解

    开发和测试小程序,需要借助微信官方提供的微信Web开发者工具进行预览和调试代码,从下载安装到使用,大致的流程如下: 1.下载安装包 下载地址传送门:https://developers.weixin. ...

  4. jQuery树形控件zTree

    初始化如下: function zTreeInit(){ parentCode = ""; setting = { view: { dblClickExpand: false, s ...

  5. 第73天:jQuery基本动画总结

    一.DOM对象跟jQuery对象相互转换 jQuery对象转换成DOM对象: 方式一:$(“#btn”)[0] 方式二:$(“#btn”).get(0) DOM对象转换成jQuery对象: $(doc ...

  6. Angel Beats,AFOer Beats?

    意识模糊的时候适合写一些奇怪的东西? NOI退役之后我尝试了很多方法调节心态.(比如做OI题,出OI题,学文化课,读书,吃饭,睡觉,水群,看番,推galgame). 然而看啥都是退役的画风.比如说推W ...

  7. 【bzoj3560】DZY Loves Math V 欧拉函数

    题目描述 给定n个正整数a1,a2,…,an,求 的值(答案模10^9+7). 输入 第一行一个正整数n. 接下来n行,每行一个正整数,分别为a1,a2,…,an. 输出 仅一行答案. 样例输入 3 ...

  8. Android Espresso(UI自动化测试)的搭建

    Espresso是Google官方提供的Android UI自动化测试的框架. 为什么叫Espresso(浓咖啡),好像是想让Android码农们轻松的写完自动化用例后能享受着咖啡,看着自动化测试&q ...

  9. 【Java】Java CSV操作代码

    CSV是逗号分隔文件(Comma Separated Values)的首字母英文缩写,是一种用来存储数据的纯文本格式,通常用于电子表格或数据库软件.在 CSV文件中,数据“栏”以逗号分隔,可允许程序通 ...

  10. Luogu4897 【模板】最小割树

    没事干写一发模板. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib& ...