Web前端速成(Html+Css+JavaScript+jQuery)-12.表格(Tables)

已于 2023-06-11 00:52:06 修改
阅读量189 收藏 3
点赞数
分类专栏： 前端开发 文章标签： html css javascript 前端 jquery
于 2023-05-06 04:16:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dhldhl/article/details/130518590
版权
  • 内容摘要：
    • 表格相关的标签table tr、th 以及td 元素。

12.表格(Tables)

知识点：

  • 一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。
  • <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
  • 在<td> 标签内，能放置段落、换行、图片、链接、列表等等。
  • 复杂的 HTML 表格还可能包括<tbody>、<caption>、<col>、<colgroup>、<thead>、<tfoot> 以及<col> 元素。
标签描述
<table>定义表格
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格单元
<caption>定义表格标题
<colgroup>定义表格列的组
<col>定义用于表格列的属性
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚
属性描述
border设置表格边框的样式，默认为无样式。在CSS中boder属性接受三个参数，分别是宽度、风格和颜色。例如：border: 0.5rem outset pink
cellpadding设置单元格内容与单元格边框之间的距离，默认为1。
cellspacing设置单元格之间的距离，默认为1。
width设置表格宽度，可以是像素值、百分比、auto等。
height设置表格高度，可以是像素值、百分比、auto等。
align设置内容在单元格中的水平对齐方式，可以是left、center、right、justify(让文本两端对齐)
valign设置内容在单元格中的垂直对齐方式，可以是top、middle、bottom，baseline(对齐第一行的基线：baseline)
background-color设置表格背景色。
colspan跨列
rowspan跨行
  • 在CSS中的一些替换属性
属性描述
padding在css中运用，类似cellpadding的作用
border-spacing在css中运用，类似cellspacing 的作用
text-align设置内容在单元格中的水平对齐方式，可以是left、center、right、justify(让文本两端对齐)
vertical-align设置内容在单元格中的垂直对齐方式，可以是top、middle、bottom，baseline(对齐第一行的基线：baseline)
margin设置表格在容器中位置

运用例子：

备注：请亲自动手模仿着输入代码，在反复练习中熟悉。

<!DOCTYPE html>
<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>HTML 表格(Tables)</title>
</head>
<body>  
    <h4>简单的表:</h4>
    <table border="1">
        <tr>
          <td>row 1, cell 1</td>
          <td>row 1, cell 2</td>
        </tr>   
        <tr>
          <td>row 2, cell 1</td>
          <td>row 2, cell 2</td>
        </tr>
    </table>

    <h4>单元格跨两列:</h4>
      <table border="1">
        <tr>
            <th>Name</th>
            <th colspan="2">Telephone</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>555 77 854</td>
            <td>555 77 855</td>
        </tr>
      </table>
      
    <h4>单元格跨两行:</h4>
      <table border="1">
        <tr>
            <th>First Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <td>555 77 855</td>
        </tr>
      </table>

      <h4>单元格 边距默认值:</h4>
      <table border="1">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>   
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
      </table>

    <h4>单元格 边距="0":</h4>
      <table border="1" cellpadding="0">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>   
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
      </table>
      
    <h4>单元格 边距="10":</h4>
    <table border="1" 
      cellpadding="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>   
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
      </table>
    <h4>单元格间距默认值:</h4>
      <table border="1">
      <tr>
        <td>First</td>
        <td>Row</td>
      </tr>
      <tr>
        <td>Second</td>
        <td>Row</td>
      </tr>
      </table>
      
    <h4>单元格间距="0":</h4>
      <table border="1" cellspacing="0">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
      </table>
      
    <h4>单元格间距="10":</h4>
      <table border="1" cellspacing="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
      </table>        

    <h4>综合各种属性的表-例如1:</h4>
      <table border="1">
        <caption>Monthly savings</caption>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
        <tr>
          <td>
            <p>这是一个段落</p>
            <p>这是另一个段落</p>
         </td>
          <td>
            这个单元格包含一个表格:
            <table border="1">
            <tr>
              <td>A</td>
              <td>B</td>
            </tr>
            <tr>
              <td>C</td>
              <td>D</td>
            </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            这个单元格包含一个列表
            <ul>
             <li>apples</li>
             <li>bananas</li>
             <li>pineapples</li>
            </ul>
          </td>
          <td>
            $50
          </td>
        </tr>
      </table>
      <hr>
      <h4>综合各种属性的表-例如2:</h4>
      <div style="width: 50%;height: 1000px;background-color: rgb(82, 17, 235);margin: auto;">
        <table border="1px" background-color="rgb(193, 64, 24)" align="center" width="70%" height="200px" valign="middle">
          <tr>
            <td align="center" valign="top">
              row1,cell1
            </td>
            <td align="right" valign="middle">
              row1,cell2
            </td>
            <td align="justify" valign="bottom">
              row1,cell3
            </td>
            <td  valign="baseline">
              row1,cell4
            </td>
          </tr>
          <tr>
            <td>
              row1,cell1
            </td>
            <td>
              row1,cell2
            </td>
            <td>
              row1,cell3
            </td>
            <td>
              row1,cell4
            </td>
          </tr>
          <tr>
            <td>
              row1,cell1
            </td>
            <td>
              row1,cell2
            </td>
            <td>
              row1,cell3
            </td>
            <td>
              row1,cell4
            </td>
          </tr>
        </table>
      </div>    

</body>
</html>

Web前端速成(Html+Css+JavaScript+jQuery)

  1. 前言
  2. 初识HTML
  3. 基本标签
  4. 属性
  5. 文本格式化
  6. 链接
  7. 图片(Images)
  8. 分组
  9. 无序列表
  10. 有序列表
  11. 自定义列表
  12. 表格(Tables)
  13. CSS
  14. 页面布局
  15. 表单(Forms)
  16. 认识JavaScript
  17. jQuery-前后台数据交互
  18. 知识总结与就业指导
乐地课堂
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
SQL-shucheng.rar_java+SQL_sql
09-20
SQL速成、 SQL速成、 SQL速成、
前端知识分享小课堂基础篇—html(table表格标签)
yunduanaoligei的博客
12-15 483
今天分享下”前端知识分享小课堂基础篇—html(table表格标签)“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 表格的标签组成HTML中的表格是由为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用标签进行定义。标签为标签的子类，设置若干个标签可以将表格分割为若干个行。标签的子类，因此每个行都需要设置相应数量的标签用于定义表格的列，标签为又是标签来分割列，形成一个完整的表格。 表格的标签组合关系为： XM
前端学习笔记一一HTML表格标签（table）(1)
最新发布
2401_84091993的博客
04-09 947
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取。
table表格讲解
lou15516575959的博客
09-07 829
基本格式。table表格讲解
【前端修炼场】— table 表格的构建
热爱生活，积极向上的阿酱！
01-10 2689
本篇文章我将带领诸位学习如何在页面中添加 table 表格。我们往往通过表格的形式去更好的展示我们所需要展示的内容。话不多说，诸君准备好了么？打开 VSCode 和我一起操作吧！很开心与你们相遇，相遇即是缘，祝愿我们都越来越好！
前端table表格的用法
码上行动
04-25 5925
文章目录一、无序列表(unordered list)二、有序列表(ordered list)三、自定义列表(definition list)总结 一、无序列表(unordered list) 代码如下： <ul type="circle/disc/square"> // 默认值circle <li>序列1</li> <li>序列2</li> </ul> html效果： 实心圆列表1 实心圆列表2
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 3609
HTML over
前端页面如何创建表格？table的结构、属性有哪些？
官方推荐
08-06 5622
前端页面如何创建表格？table的结构、属性有哪些？
JS+JQuery+nodejs.zip
07-04
这个资源包含javascript，jquery，nodejs的课件，两小时速成学习，能让大概知道javascript，jquery，nodejs的基本用法，但是想深入学习还是网上找其他资料，但想速成学习，快速学习，这个资源绝对不差
Div+CSS经典速成教程.pdf
05-28
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步...
DIV+CSS经典速成教程
04-11
今天看到一个Div+CSS 布局的经典教程，奉献给大家，本人一向偏好DIV+CSS， 但由于关注seo 和网站运营较多，造成了DIV+CSS 做网页模板的技术生疏，为 了培养自己成全才，不得不好好消化一翻，其实很简单滴。这个DIV+...
Div+CSS经典速成教程
03-23
Div+CSS经典速成教程 Div+CSS 布局的经典教程，奉献给大家，本人一向偏好 DIV+CSS， 但由于关注 seo 和网站运营较多，造成了 DIV+CSS 做网页模板的技术生疏，为 了培养自己成全才，不得不好好消化一翻，其实...
前端必知：17.表格
qq_52799985的博客
07-19 138
table 表示表格。
前端基础标签（表格标签）
qq_52763599的博客
12-28 961
前端表格基础详解
前端vue自定义table 表格 表格组件 Excel组件
chenchuang0128的博客
05-29 6600
随着技术的发展，前端开发的复杂度越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，我们可以将复杂的系统分解为一系列简单的组件，这不仅提高了开发效率，降低了维护成本，而且使得我们的应用更加灵活，能够更好地适应不断变化的需求。在实现原理中，我们的自定义表格组件Excel采用了自适应布局设计，可以根据不同的屏幕尺寸自动调整表格的列宽，以达到最佳的显示效果。此外，我们的Excel组件还具有很好的扩充性。
Web前端之表格
花&败
10-29 5392
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspancolspan。
前端基础知识——table表格 （全选）（十一）
weixin_45496521的博客
06-15 199
【代码】前端基础知识——表格制作 （全选）（十一）
前端学习笔记——table表格的创建Html基础
asdfghjilp的博客
04-17 1118
文章目录一、table数据表格的基础创建二、table表格的相关属性三 、table tr td属性设置 一、table数据表格的基础创建 <table> <!-- 创建表格 --> <tr> <!-- tr 表示行 --> <td>1</td> <!-- td表示列 --> <td>2</td> </tr> <tr>
gnuplot-iostream.h
07-27
- *2* *3* [【C++】速成笔记](https://blog.csdn.net/Chrstian/article/details/130468907)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乐地课堂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值