您的位置：首页 > Web前端 > HTML

table

2015-11-25 17:04 489 查看

重要标签

一.文本标签

1.标题标签<hi></hi>1到6，h1最大，h6最小

2.文本控制标签

(1)<font></font>

size：大小，size加减一个数字，是在默认的大小上加减（默认的和三号字差不多大）。color：颜色

         <font color="red" >博看文思1</font>

<font color="red" size="3">博看文思2</font>

<font color="red" size="+1">博看文思3</font>

<font color="red" size="-1">博看文思4</font>

(2)<em></em> 输出需要强调的文本（斜体加黑体）

  <div><em>博看文思</em></div>

(3) <b></b> 加粗

 <div><b>博看文思</b></div>

(4)<p></p>段落标签,可以使用align用来说明对齐方式

<p align="center" style="border:solid 1px red">博看文思</p>

<div align="center" style="border:solid 1px red">博看文思</div>

<div align="center" style="border:solid 1px red">博看文思</div>

<p></p>与<div></div>的区别，<p>元素会换行，<div>不会




(5)<br />结束标签，单标记，回车换行

  <span>博看文思1</span><span>博看文思2</span>

加上<br />换行之后

 <span>博看文思1</span><br /><span>博看文思2</span>

（6）普通列表标签<dl></dl>定义列表

<dt></dt><dd></dd>

 <!--定义列表<dl></dl>-->

<dl>

<dt>水果</dt>

<dd>苹果</dd>

<dd>香蕉</dd>

<dt>蔬菜</dt>

<dd>茄子</dd>

<dd>辣椒</dd>

<dt>酒水</dt>

<dd>白酒</dd>

<dd>红酒</dd>

</dl>

 有序列表<ol></ol>

                    <!--有序列表<ol></ol>-->

<ol>

<li>张三</li>

<li>李四</li>

<li>王五</li>

<li>钱六</li>

</ol>

   <!--无序列表<ul></ul>-->

<ul>

<li>张三</li>

<li>李四</li>

<li>王五</li>

<li>钱六</li>

</ul>

 <!--有序列表变无序<ol></ol>-->

<ol style="list-style-type:disc">

<li>张三</li>

<li>李四</li>

<li>王五</li>

<li>钱六</li>

</ol>

<!--无序列表变有序<ul></ul> style="list-style-type:decimal" 可以改变样式，none：什么都没有，square：方块

-->

<ul style="list-style-type:decimal">

<li>张三</li>

<li>李四</li>

<li>王五</li>

<li>钱六</li>

</ul>

 <!--设为none时，一定要把margin:0px;padding:0px;-->

<ol style="list-style-type:none;margin:0px;padding:0px;">

<li>张三</li>

<li>李四</li>

<li>王五</li>

<li>钱六</li>

</ol>

（7）图片标签<img />


          

<img src="images/111.png" />





          

<img src="images/1.png" alt="请重新查看路径是否正确"/>



图片名字不正确

  <!--image属性 src:路径 alt: 图片加载不出来时，提示作用title: 这张图片是什么。width：宽. height:  高 .border:边框-->

<!--

<img src="images/111.png"

alt="请重新查看路径是否正确"

title="这是我的桌面"

width="420"

height="500"

border="1"/>

-->

                            <img src="images/111.png"

	alt="请重新查看路径是否正确"

	title="这是我的桌面"

style="width:420px;

height:500px;

border:solid 1px red;

padding:3px;"/>

（8）水平线<hr />

            <hr size="3"

width="200px"

color="red"/>

        <hr>常用于一个东西的后面

             <div>通知</div>

<hr size="3"

width="200px"

color="red"

align="left"/>

（9）表格元素<table></table>

  <!--表格元素<table></table>  -->

<table width="100%"

border="1"

cellpadding="0"

cellspacing="0">

<tr bgcolor="lightblue">

<th><font color="white">第一列</font></th>

<th><font color="white">第二列</font></th>

<th><font color="white">第三列</font></th>

</tr>

<tr>

<td align="center">1-1</td>

<td align="center">1-2</td>

<td align="center">1-3</td>

</tr>

<tr>

<td align="center">2-1</td>

<td align="center">2-2</td>

<td align="center">2-3</td>

</tr>

<tr>

<td align="center">3-1</td>

<td align="center">3-2</td>

<td align="center">3-3</td>

</tr>

</table>

跨行：rowspan=" "

跨列：colspan = " "

  <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<table border="1">

<tr>

<th rowspan="3">1-1</th>

<th>1-2</th>

<th>1-3</th>

</tr>

<tr>

<td>2-2</td>

<td>2-3</td>

</tr>

<tr>

<td>3-2</td>

<td>3-3</td>

</tr>

</table>

</body>

</html>

 <td align="center">你好</td>//使单元格中的内容“你好”居中

                        <table width="100%"

border="1"

cellpadding="0"

cellspacing="0">

                   Cellpadding 来创建单元格内容与其边框之间的空白

                    Cellspacing 增加单元格之间的距离。

给table中的文字居中用:

<table style="text-align:center ">
使table居中用:
<table align="center"></table>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航