零基础html学习-第五期

好久不见，兄弟们。我又回来继续更blog了！
博主主页：GUIDM
收入专栏：零基础HTML学习

一、表格

tr:行 td：列
  
th:表头单元格，内部文本加粗并居中显示。

表格

属性

border：定义线条的粗细

width：定义表格的总宽度

height：定义表格的总高度

cellspacing：定义单元格之间的距离

cellpadding：定义单元格边框和文本之间的距离

align：定义表格在页面中水平方向上的对齐方式

bgcolor：修饰表格的背景颜色

bordercolor：修饰表格的边框颜色

想让单元格之间的距离，或者单元格与文本之间的距离变大，调整cellspacing和cellpadding即可。

表格行

属性

height：设置表格行的高度（总高度不变）

bgcolor：背景颜色（一整行）

align：设置tr内部所有单元格内容的水平对齐方式

valign：设置tr内部所有单元格内容的垂直对齐方式

tr无宽度属性
单元格中默认的对齐方式：水平左侧对齐，垂直居中对齐。

单元格

一般放在第一个

标签之前。

表格头：

表格体：

表格尾：

表格如果没有使用任何分组标签，浏览器在渲染时，会把table中所有未分组的tr放在一个tbody标签里。
一个表格只允许使用一个thead和一个tfoot，但允许使用多个tbody。

列分组标签：

：把一列或连续的几列分成一组，经常用于表格一整列单元格的颜色。

span属性：多少列为一组

bgcolor属性：背景颜色

二、svg

svg标签是svg图形的一个容器（绘制图形的画布）。

重要属性：

width：定义画布的宽度

height：定义画布的高度

形状元素：

矩形

width:定义矩形的宽度

height：定义矩形的高度

fill：填充颜色

stroke-width：边框宽度

stroke：边框颜色

x：左边位置

y：顶部位置

fill-opacity：填充颜色的不透明度（0-1）

stroke-opacity：描边颜色的不透明度（0-1）

opacity：整个元素的不透明度（0-1）

圆角矩形

通过定义rx，ry属性，同值为圆角，不同值为椭圆。

svg width="500px" height="500px">

cx：定义圆形中心的x坐标

cy：定义圆形中心的y坐标

r：定义圆形的半径

stroke：边框颜色

stroke-width：边框宽度

fill：背景色填充

椭圆

cx:圆心x坐标

cy：圆心y坐标

rx：水平半径

ry：水平半径

stroke：边框颜色

stroke-width：边框宽度

fill：背景色填充

线条

x1：起点x坐标

x2：结束x坐标

y1：起点y坐标

y2：结束y坐标

多边形

points：图形每个点的坐标，至少三对坐标，每对坐标用空格隔开。

多线条

points:2个以上的坐标，一般用于折现的表现。

文章版权归作者所有，未经允许请勿转载。

THE END

文章

喜欢就支持一下吧

清除单元格之间的距离/单元格跟文本之间的距离：

  1  2  
  1  2
1 2

单元格合并

rowspan：合并行

colspan：合并列

可查看：合并案例
这个案例可以很好的了解如何使用合并

表格分组

表格标题：

零基础html学习-第五期

一、表格

表格行

单元格

二、svg

重要属性：

形状元素：

2022 年全国职业院校技能大赛高职组云计算赛项试卷

读SQL学习指南（第3版）笔记13_读后总结与感想兼导读

使用思维链（Chain-of-thoughts）提示在大型语言模型中引出推理

【Java】认识String类

初学者：8个JavaScript技巧

《Python入门到精通》time模块详解，Python time标准库，time库函数大全

清除单元格之间的距离/单元格跟文本之间的距离：

单元格合并

表格分组