您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

HTML列表标签和表格标签

 

目录

一、列表标签与表格标签要点

二、列表 LIST

(一)有序列表:

(二)无序列表:

(三)自定义(相互嵌套使用)

三、表格标签 TABLE

(一)表格标签 

  (二)行列标签

(三)合并          

(四)示例


一、列表标签与表格标签要点

 

二、列表 LIST

(一)有序列表:

<ol></ol> 

type类型有:

A,B ,C, ......

a,b,c,......

1,2,3,......

 按大写罗马数字排序

  按 小写罗马数字排序

<strong><font size="50">搜索引擎排名</font></strong>
    <ol>
        <li>Google</li>
        <li>Baidu</li>
        <li>Bing</li>
        <li>Sogou</li>
    </ol>

效果图:

(二)无序列表:

<ul></ul>

type类型:

disc——实心圆

circle——空心圆

square——实心方块


    <strong><font size="50">软件编程语言</font></strong>
    <ul type="disc">
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
        <li>JavaScript</li>
    </ul>

效果图:

(三)自定义(相互嵌套使用)

 <strong><font size="50">健康食品</font></strong>
    <ol>
        <ul>水果</ul>
        <ul>
            <ul>苹果</ul>
            <ul>香蕉</ul>
        </ul>
        <ul>蔬菜</ul>
        <ul>
            <ul>西兰花</ul>
            <ul>菠菜</ul>
        </ul>
    </ol>

效果图:

三、表格标签 TABLE

(一)表格标签 <table>

属性:

width:宽

height:高

border:边框

cellspacing:外边距

align:水平对齐方式 "left" "center"  "right"

valign:垂直对齐方式 "top"  "middle"  "bottom"

bgcolor:背景颜色

 (二)行列标签

<tr>:行
<td>:列

属性:
        align:水平对齐方式——center,left,right
        bgcolor:背景色

(三)合并          

属性:
         colspan:合并列
         rowspan:合并行

(四)示例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说排行榜</title>
</head>
<body>
    <h1 align="center">小说排行榜</h1>
    <table align="center" border="1px" width="50%" height="150px" cellspacing="0">
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th colspan="3">相关链接</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="images/up.jpg"/></td>
        <td>356</td>
        <td>3560</td>
        <td><a href="贴吧.html">贴吧</a></td>
        <td><a href="图片.html">图片</a></td>
        <td><a href="百科.html">百科</a></td>
    </tr>

    <tr align="center">
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="images/down.jpg"/></td>
        <td>356</td>
        <td>3560</td>
        <td><a href="贴吧.html">贴吧</a></td>
        <td><a href="图片.html">图片</a></td>
        <td><a href="百科.html">百科</a></td>
    </tr>

    <tr align="center">
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="images/up.jpg"/></td>
        <td>356</td>
        <td>3560</td>
        <td><a href="贴吧.html">贴吧</a></td>
        <td><a href="图片.html">图片</a></td>
        <td><a href="百科.html">百科</a></td>
    </tr>

    <tr align="center">
        <td>1</td>
        <td>鬼吹灯</td>
        <td>1</td>
        <td>356</td>
        <td>3560</td>
        <td><a href="贴吧.html">贴吧</a></td>
        <td><a href="图片.html">图片</a></td>
        <td><a href="百科.html">百科</a></td>
    </tr>

    <tr align="center">
        <td>1</td>
        <td>鬼吹灯</td>
        <td>1</td>
        <td>356</td>
        <td>3560</td>
        <td><a href="贴吧.html">贴吧</a></td>
        <td><a href="图片.html">图片</a></td>
        <td><a href="百科.html">百科</a></td>

        <tr align="center">
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="贴吧.html">贴吧</a></td>
            <td><a href="图片.html">图片</a></td>
            <td><a href="百科.html">百科</a></td>

            <tr align="center">
                <td>1</td>
                <td>鬼吹灯</td>
                <td>1</td>
                <td>356</td>
                <td>3560</td>
                <td><a href="贴吧.html">贴吧</a></td>
                <td><a href="图片.html">图片</a></td>
                <td><a href="百科.html">百科</a></td>
    </table>
</body>
</html>

在表格标签中可以用<img>标签插入图片,以及<a href="  "></a>实现超链接的跳转等。

效果图:

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进