博客列表 >demo 自己瞎搞 表格

demo 自己瞎搞 表格

1999权限的博客
1999权限的博客原创
2018年08月16日 16:46:59676浏览

QQ截图20180813145551.png实例

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>8.12菜单</title>

    <link type="text/css" rel="stylesheet" href="8.12%20zuo.css">
</head>

<body>

<!-- 1、<table>...</table>定义表格

     2、caption标签,为表格添加标题和摘要

     3、table border=# width=# height=# 边框尺寸|cellspacing=# 表格间隙 | summary=# 表格摘要

     4、<caption>...</caption>表格标题-->
<div class="beijin">

<table border="1" width="400" height="200" cellspacing="1" summary="表格摘要" class="bbb1">

    <caption>菜单</caption>

    <!-- tbody 标记用于定义表格主体,改善网页浏览速度 -->

    <tbody>

    <!-- 1、tr th td align=#  #=left, center, right 文字对齐

                 2、<th>…</th>:表格表头

                 3、<td>…</td>:表格的一个单元格

                 4、<tr>…</tr>:表格的一行  -->

    <tr align="center">

        <th align="center">序号</th>

        <th align="center">菜名</th>

        <th align="center">价格</tth>

    </tr>

    <tr align="center">

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

        <td align="center">表格</td>

        <td align="center">表格</td>

    <tr align="center">

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

        <td align="center">表格</td>

        <td align="center">表格</td>

    </tr>

    <tr align="center">

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

        <td align="center">表格</td>

        <td align="center">表格</td>

    <tr align="center">

        <td align="center">4</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    </tr>

    <tr align="center">

        <td align="center">5</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    <tr align="center">

        <td align="center">6</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    </tr>

    <tr align="center">

        <td align="center">7</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    <tr align="center">

        <td align="center">8</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    </tr>

    <tr align="center">

        <td align="center">9</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    <tr align="center">

        <td align="center">10</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    </tr>

    <tr align="center">

        <td align="center">11</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    <tr align="center">

        <td align="center">12</td>

        <td align="center">表格</td>

        <td align="center">表格</td>

    </tr>


</table>
</div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

<!DOCTYPE HTML>

<html>

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <title>8.12菜单</title>

   <link type="text/css" rel="stylesheet" href="8.12%20zuo.css">
</head>

<body>

<!-- 1、<table>...</table>定义表格

    2、caption标签,为表格添加标题和摘要

    3、table border=# width=# height=# 边框尺寸|cellspacing=# 表格间隙 | summary=# 表格摘要

    4、<caption>...</caption>表格标题-->
<div class="beijin">

<table border="1" width="400" height="200" cellspacing="1" summary="表格摘要" class="bbb1">

   <caption>菜单</caption>

   <!-- tbody 标记用于定义表格主体,改善网页浏览速度 -->

   <tbody>

   <!-- 1、tr th td align=#  #=left, center, right 文字对齐

                2、<th>…</th>:表格表头

                3、<td>…</td>:表格的一个单元格

                4、<tr>…</tr>:表格的一行  -->

   <tr align="center">

       <th align="center">序号</th>

       <th align="center">菜名</th>

       <th align="center">价格</tth>

   </tr>

   <tr align="center">

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

       <td align="center">表格</td>

       <td align="center">表格</td>

   <tr align="center">

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

       <td align="center">表格</td>

       <td align="center">表格</td>

   </tr>

   <tr align="center">

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

       <td align="center">表格</td>

       <td align="center">表格</td>

   <tr align="center">

       <td align="center">4</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   </tr>

   <tr align="center">

       <td align="center">5</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   <tr align="center">

       <td align="center">6</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   </tr>

   <tr align="center">

       <td align="center">7</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   <tr align="center">

       <td align="center">8</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   </tr>

   <tr align="center">

       <td align="center">9</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   <tr align="center">

       <td align="center">10</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   </tr>

   <tr align="center">

       <td align="center">11</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   <tr align="center">

       <td align="center">12</td>

       <td align="center">表格</td>

       <td align="center">表格</td>

   </tr>


</table>
</div>
</body>

</html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议