HTML&CSS基础学习笔记1.18-表格的边框

今天的内容比较简单~来看看HTML里表格的边框是怎么设置的吧

表格的边框

前面为了方便观察表格单元格的情况,我们给<table>加了border属性。
<table>的border属性规定围绕表格的边框的宽度。

[border]属性会为每个单元格绘制边框,并用边框围绕表格。如果border属性的值发生改变,只有表格周围边框的尺寸会发生变化,表格内部的边框不受影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的边框 border</title>
</head>
<body>
    <h2>观察border的作用</h2>
    <table border="10">
        <tr><td>第一个单元格</td><td>第二个单元格</td><td>第三个单元格</td></tr>
        <tr><td>第四个单元格</td><td>第五个单元格</td><td>第六个单元格</td></tr>
        <tr><td>第七个单元格</td><td>第八个单元格</td><td>第九个单元格</td></tr>
    </table>
</body>
</html>

结果会是?

更多学习内容,就请前往码芽网吧http://www.mayacoder.com/lesson/index

想要尝试、调整不同的边框设置,就去试试吧~

时间: 2024-10-11 22:14:08

HTML&CSS基础学习笔记1.18-表格的边框的相关文章

HTML&CSS基础学习笔记15-合并单元格

合并单元格 之前的文章中,我们已经能够创建一个简单地表格了,如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并,我们该怎么做呢?我们要知道的知识点如下: 1.标签<td>的[colspan]属性规定单元格可横跨的列数,即横向合并的单元格数: 2.标签<td>的[rowspan] 属性规定单元格可横跨的行数,即纵向合并的单元格数: 3.这2个标签也可以同时使用. 样式示例: 现在就来试试合并单元格吧: <!DOCTYPE 

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

HTML&CSS基础学习笔记7-高亮文本及组合使用

HTML提供了<mark>标签可以让你的文本高亮,这样看起来更加醒目.<mark>标签内的文本会呈现特殊的样式,它和<em>,<strong>一样也是一个带有语义的标签. 代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高亮文本</title><

HTML&CSS基础学习笔记4-定义文档类型

定义HTML的文档类型 Web 世界中存在许多不同的文档.只有了解文档的类型,浏览器才能正确地显示文档. HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML 版本,浏览器才能完全正确地显示出 HTML 页面.这就是 <!DOCTYPE> 的用处. <!DOCTYPE> 声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用置标语言解析器,它应该使用什么样的文档

HTML&CSS基础学习笔记14—有序列表及列表嵌套

我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去.HTML里用<ol>标签来表示有序列表,<ol>标签的列表项依然是用<li>标签表示. 它的代码模板是这样的: <span style="font-family:Microsoft YaHei;"><ol>       <

HTML&CSS基础学习笔记3-HTML的标签语法

HTML标签语法 1. 标签由英文尖括号<和>括起来,如<html>就是一个标签. 2. HTML中的标签一般都是成对出现的,分开始标签和结束标签.结束标签比开始标签多了一个/.如: <p></p> 3.标签的内容是开始标签与结束标签之间的内容,如:<h1>这是标题</h1>. 4. 标签与标签之间是可以嵌套的,但先后顺序必须保持一致,如:<div>里嵌套<p>,那么</p>必须放在</div

HTML&CSS基础学习笔记11-导航栏

上文我们介绍到的<a>标签,由于<a>标签可以用来跳转,所以我们可以拿<a>标签来生成网页的导航栏. 其实在实际运用中,<a>标签就经常会被用来生成导航栏. 导航栏在HTML中有一个语义化的标签<nav>,这个标签表示带有导航性质的内容,会有自己默认的特殊样式.语义化标签我们将会在后面讲到. 我们在这里先使用下<nav>标签,和<a>组合成一个导航栏. 代码如下: <!DOCTYPE html> <htm

HTML&CSS基础学习笔记2-Html的全局属性

HTML元素都有属性,下面的这些全局属性是所有的HTML元素都可以使用的. 常见的有: HTML元素也有一些本身自己独特的属性,我们以后的笔记中有机会,会再为大家介绍哦. 下面是代码测验,更多体验学习,可前往码芽网哦http://www.mayacoder.com/lesson/index HTML&CSS基础学习笔记2-Html的全局属性