html学习笔记2

最新推荐文章于 2024-11-14 00:00:11 发布

sunnoco

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量361

点赞数

文章标签： html microsoft table 浏览器 border 扩展

本文链接：https://blog.csdn.net/sunnoco/article/details/1779961

版权

表格，一般的用于对网页的内容进行排版
表格的基本语法：<table>...</table> - 定义表格
                      <tr> ...</tr>- 定义表行
                      <th> ...</th>- 定义表头
                      <td> ...</td>- 定义表元

<table border="1"> 
不带边框的表格:去掉border属性即可

跨多列的表元 <th colspan=#>
<tr><th colspan=3> Morning Menu</th>

跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th>

<TABLE>
1.设定表在整个网页中的对齐方式

   <TABLE>的ALIGN属性来指定表格的对齐方式,可以取值“left”、“center”和“right”。
   使用<TABLE>的ALIGN属性要小心，不是所有的浏览器都能识别它。

2.设定表的高和宽

   <TABLE>的WIDTH属性控制表的宽，<HEIGHT>属性指定表高
   属性值可以是绝对值或相对值（%）。
   使用height属性时要小心，Microsoft和Netscape的浏览器都能正确解释它，但它并不是HTML 3.2规范中的一部分。

3.设定整个表的背景图像

<TABLE>的BACKGROUND属性来指定一幅图象：
Netscape和Microsoft的浏览器都允许你为表格设定背景图片

4.设置表的背景图颜色

    <TABLE>的BGCOLOR属性：设置表格的整体颜色
    可以使用颜色名或RGB值来设定BGCOLOR的值
    根据HTML 3.2规范，表格不具有任何颜色属性。
    然而，Netscape和Microsoft都扩展了HTML来让表格具有自己的背景色，两种浏览器都能识别<TABLE>标识符的BGCOLOR属性。

5.对表中每一行或每一项的控制

(1)每行元素的对齐方式

      每行元素的水平对齐方式
        <TR>的ALIGN属性来设置表格中每行元素的水平对齐方式，这个属性也可以取值“left”、“center”和“right”。
      每行元素的竖直对齐方式
        <TR>的VALIGN属性设置某一行中所有元素的竖直对齐方式，它可以取值“top”、“middle”和“botton”（缺省情况下取值“middle”）。

(2) 表头<TH>或表元素<TD>的排列方式

     <TH>或<TD>的ALIGN和VALIGN属性
     这两个属性的取值范围与<TR>的相同，<TH>的<TD>ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。


(3)设定颜色

     <TR>的BGCOLOR属性设定整行的颜色
     <TD>的BGCOLOR属性设定该表项的颜色

(4)设定表项的背景图像

     <TD>的BACKGROUND属性设定该表项的图像

(5)控制表项的大小

     <TD>的CELLPADDING属性，控制表格中每个表项的空间大小，
     <TD>的CELLSPACING属性，控制表格中每个表项的空间大小的同时，加宽了表项之间的空隙。
      这两个属性的值都以象素来指定。

      默认的情况:
      当浏览器显示一个表格时，它将每一列的宽度设置为这一列中最长表项(某列中最长的那个元素)的宽度。
      浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。

6.<TABLE>具有一个比<BODY>更大的优势

     它很象<BODY>标识符。
     在Netscape 和Microsoft的浏览器上，可以为表格指定它自己的背景色和图象。
     <TABLE>标识符还能包含所有能在<BODY>中包含的HTML标识符。
            每一个HTML文件必须有且只有一个<BODY>标识符，但在HTML文件中包含任意数目的<TABLE>。
     当你想把单个网页分成多个部分时，就用<TABLE>标识符。可以将<TABLE>看成是用来在网页中建立一个子页的标识符。

神奇：style="background-color:#E6E6FA"可以给按钮，text背景设置颜色