`

HTML的表格创建与修饰

 
阅读更多

 

在网页编写中，我们会用到表格，这就涉及了表格的创建和样式的编写，表格的创建分为行和列，还有表格的一些修饰也就是一些样式，比如 ，表格文字的居中，表格的边框样式与边框颜色等。

 

我么先创建简单的表格，先创建一个三行三列的表格，行用<tr>标签列用<td>标签，在用一个<table>标签代码如下 ：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table   width="200"
         border="none"
         height="50px"
         >
<tr>
    <td align="center">1</td>
    <td align="center">2</td>
    <td align="center">3</td>
</tr>
<tr>
    <td align="center">4</td>
    <td align="center">5</td>
    <td align="center">6</td>
</tr>
<tr>
    <td align="center">7</td>
    <td align="center">8</td>
    <td align="center">9</td>
</tr>
</table>
</body>
</html>

 

效果图如下



    

这就是我们创建的三行三列的表格，下面我们来解释一下align=center，align是HTML中的定位标签，center为中心也就是居中，还可以写的参数是left ，right。

 

 

我们看上面的效果图可以看出这个表格有连个边框，这样看着不美观 ，我们可以设置一下去掉边框，变成单边框的表格，我们还可以给表格边框设置颜色，代码如下

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table     width="200"
           border="none"
           height="50px"
           bordercolor="red"
           cellspacing="0">
<tr>
    <td align="center">1</td>
    <td align="center">2</td>
    <td align="center">3</td>
</tr>
<tr>
    <td align="center">4</td>
    <td align="center">5</td>
    <td align="center">6</td>
</tr>
<tr>
    <td align="center">7</td>
    <td align="center">8</td>
    <td align="center">9</td>
</tr>
</table>
</body>
</html>

 

效果图如下



 

这样我们就实现了边框的修改，解释一下其中的一些属性cellspacing是单元格的间距，我们设置为0px就取消了双边框。

 

这里我们可以拓展一下 ，我们如果需要还可以在表格中增加提交按钮。用来提交我们填写好的表格

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table     width="800"
           border="none"
           height="200px"
           bordercolor="red"
           cellspacing="0">
<tr>
    <td align="center">1</td>
    <td align="center">2</td>
    <td align="center">3</td>
</tr>
<tr>
    <td align="center">4</td>
    <td align="center">5</td>
    <td align="center">6</td>
</tr>
<tr>
    <td align="center">7</td>
    <td align="center">8</td>
    <td align="center"><button class="button" style="width: 80px;border-radius: 10px;height: 30px;background-color: #467ECF"><a>按钮</a></button></td>
</tr>
</table>
</body>
</html>

 

我们给按钮<button>设置了一些属性就得到了显示的效果。效果图如下：

 



  我们还可以给按钮标签添加超链接 我们在<a>标签中添加就可以

 

<a herf="  我们要连接到的地址"></a>

 

 其他的属性不用改变就可以了 

  • 大小: 13.6 KB
  • 大小: 21.7 KB
  • 大小: 18.7 KB
分享到：
| HTML的导航栏的写法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML表格的美化修饰

    为了创建一个布局协调、色调统一、美观且大方的表格，我们需要掌握一些HTML表格的美化修饰技巧。下面我们将详细探讨这些关键点。 1. **基础表格结构**： 首先，我们需要了解基本的HTML表格元素，如`&lt;table&gt;`, `...

    html+css+script 简单表格

    通过分析这个文件，我们可以了解如何将HTML表格与JavaScript结合起来，提升用户体验。 总结，"html+css+script 简单表格"主题涵盖了使用HTML创建表格结构，用CSS美化表格样式，以及用JavaScript增强表格功能的全...

    HTML表格标记教程(48):CSS修饰表格

    CSS修饰表格主要利用CSS的边框属性来实现表格的美化。本文介绍了使用CSS来美化表格的多种方法，特别关注了当表格的cellspacing、cellpadding、border值设为0时的样式应用。以下是具体的CSS修饰技巧： 1. 1px表格...

    HTML制作表格.ppt

    本章节将介绍HTML制作表格的相关知识点，以便读者能够快速掌握HTML表格的制作方法和美化技巧。 一、为什么使用表格？ 表格是HTML文档中的一种常见结构，广泛应用于网页上的文本和图像存放。它可以将数据以表格形式...

    web开发表格建立

    首先，让我们从HTML表格的基础开始。在HTML中，我们使用`&lt;table&gt;`标签来创建一个表格。表格的基本结构由以下元素组成： 1. `&lt;table&gt;`：定义表格。 2. `&lt;tr&gt;`：定义表格行。 3. `&lt;th&gt;`：定义表头单元格，通常用粗体...

    用CSS样式定义的圆角表格

    通过分析提供的文件信息，我们可以提炼出以下几个与CSS样式定义的圆角表格相关的知识点： ### CSS样式定义圆角表格的关键技术点 #### 1. **HTML结构** - 在本示例中，圆角表格主要是通过一个`&lt;div&gt;`元素来实现的...

    创建PDF文档，加密创建的PDF文档，使用第三方组件创建PDF文档，修饰PDF文档，转换PDF文档

    例如，Aspose.PDF允许开发者创建复杂的PDF表格，插入图像，甚至合并多个PDF文档。通过API调用，可以轻松实现这些功能，如Aspose.PDF.Document对象的Load方法加载现有PDF，而Pages集合则用于处理页面。 4. 转换PDF...

    HTML制作表格ppt课件.ppt

    创建表格非常简单，首先需要定义表格的边框尺寸，然后定义表头和表格内容。例如： 姓名 性别 学号 你的名字 你的性别 你的学号 王平 男 &lt;TD&gt;148081222 跨行跨列的表格 跨行跨列的表格可以...

    HTML制作表格PPT学习教案.pptx

    总结起来，HTML表格的制作和美化涉及多个元素和属性，掌握这些基础知识后，你就可以创建出结构清晰、视觉美观的表格，无论是用于会计学的数据展示，还是门户网站的信息组织，都能得心应手。通过不断实践和学习，你将...

    HTML制作表格PPT教案.pptx

    通过掌握这些基本概念和技巧，你可以创建出满足需求的HTML表格，无论是在论坛、门户网站还是购物网站中，都能有效地组织和展示信息。同时，结合CSS的进一步学习，还可以实现更多高级的表格样式和交互效果，提升用户...

    纯html标签静态调用xml文件及xsl对xml文件的的显示修饰

    为了将XML与XSL结合，我们需要在HTML中引用XSL文件，通常是通过`&lt;xsl:transform&gt;`标签，但考虑到题目要求不使用JavaScript，我们可以使用以下HTML5的`&lt;link&gt;`标签： ```html ``` 将这个`&lt;link&gt;`标签添加到HTML...

    HTML期末复习题(含答案).doc

    1. 在 HTML 表格中，表格的列数等于第一行中 TH 与 TD 的 colspan 属性的和吗？答：否。 2. 在 HTML 表格中，在 TR、TD 或 TH 标记符中使用 align 属性可以控制单元格内容的垂直对齐吗？答：是。 四、表单处理 1. ...

    (北大青鸟)HTML学习教程（002）

    HTML，全称HyperText Markup Language，是一种用于创建网页的标准标记语言。... ...&lt;!...页面链接主要通过标签实现，有四种基本...通过学习HTML表格的创建、跨行跨列的使用以及美化修饰，我们可以创建出丰富多彩的网页内容。

    HTML基础使用教程

    9. **HTML表格**：使用`&lt;table&gt;`、`&lt;tr&gt;`、`&lt;td&gt;`等标签创建数据表格。 10. **HTML列表**：`&lt;ul&gt;`、`&lt;ol&gt;`和`&lt;li&gt;`标签用于创建无序和有序列表。 11. **HTML表单**：`&lt;form&gt;`、`&lt;input&gt;`、`&lt;button&gt;`等元素用于...

    Html+Css+Javascript从入门到精通.pdf

    **第一章：了解HTML、Web与Internet** - **互联网的起源**：介绍互联网的发展历史及其重要意义。 - **浏览器介绍**：概述主流浏览器的功能及特性。 - **HTML简介**：介绍HTML（HyperText Markup Language）的基本...

    jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等).rar

    该插件支持HTML内容意味着你可以嵌入任何HTML标记，如表格、段落、按钮等，这为创建丰富的交互式弹出窗口提供了可能。Flash支持则允许你嵌入SWF文件，从而展示动态的Flash内容，如游戏、视频播放器等。对于图片，...

Magicbox
Global site tag (gtag.js) - Google Analytics