如何控制表格的宽度_初识表格简单制作

最新推荐文章于 2023-10-01 11:59:29 发布
最新推荐文章于 2023-10-01 11:59:29 发布
阅读量124 收藏
点赞数
文章标签： 如何控制表格的宽度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30306285/article/details/112731543
版权
60bb9fabe026d6793beea79f173e2a06.gif

我们来完成一个这样5行5列的一个表格

5c5e762cb379dc93d1722d0a78819381.png

在编写表格之前，我们先来认识一下HTML中表格的标签

table表示整个表格；tr代表每一行；td代表每一个单元格；

3cbeaa2486ac198cfc9b5025450b4fd3.png

还是像之前一样，建立文件夹、目录、.html文件

在HTML中编写标签如下

b06b0618fe895504fa4b71921506159c.png

现在我们看一下效果

8f698391aa9f2bf94c92c844111a0d15.png

但是看起来很别扭，表格中没有边框，这是因为我们没有设置边框，默认边框为0

我们给表格加入边框 border 属性

8610f0383f352bc4ae3919b9ff90f5f5.png

再来看一下效果

d79035ec262e7c3f96e4681d84658d4b.png

这个边框好像和我们一开始的也不太一样，边框中间有空隙，我们不想要空隙

就要设置cellspacing为0

7db35e9c11b5b6c6d40b628299177aeb.png

来看效果，现在就比较正常了

9bcf412ccfa5243a4af0ef1427fa15b3.png

一个简单的表格制作就练习完成了。

2004fe683e0f46f26fcff41b56d88934.png

如果以上都练习好了，那我们来进一步的完善一下这个表格

因为我们的表格每个单元格宽度都不一样的，默认是由文字的多少来决定，如果我们想控制这个宽度，那么就要设置每个单元格的宽度width

36d2c0149d8f9d89674f361446e0dcc7.png

来看效果，每个单元格就是一样宽了

4dd97f348bee8171967da44a1dbe2fc8.png

但是文字都是左对齐，我们要对其设置居中对齐center

ab1f4c76d86269387d3f93a83a77c483.png

来看效果

fc11b61e2f4912f18b1ac9b0c680f04c.png

现在就可以看到文字居中对齐了。

948df78b954e86fc92c77a80a918e143.gif

我们来完成一个这样5行5列的一个表格

af6a5f66c946083eda9b009bd18ecb15.png

在编写表格之前，我们先来认识一下HTML中表格的标签

table表示整个表格；tr代表每一行；td代表每一个单元格；

6535304af1167c5d2ace0663f9fc6989.png

还是像之前一样，建立文件夹、目录、.html文件

在HTML中编写标签如下

7c014ef2141e72685859c415d8073fc2.png

现在我们看一下效果

9f6fe100f2f9c0ab15d97f76d6967748.png

但是看起来很别扭，表格中没有边框，这是因为我们没有设置边框，默认边框为0

我们给表格加入边框 border 属性

3eab54daad38a01172bc823666177441.png

再来看一下效果

c8f6c28d8b2406aad9adde5481913460.png

这个边框好像和我们一开始的也不太一样，边框中间有空隙，我们不想要空隙

就要设置cellspacing为0

c42fd3d27eba4a95d88c1b0d88e5c3a6.png

来看效果，现在就比较正常了

7ffb30e03ca8ed9107b539dfd0b4794d.png

一个简单的表格制作就练习完成了。

2abc8b5f89016fd1ec25a42bc02fff19.png

如果以上都练习好了，那我们来进一步的完善一下这个表格

因为我们的表格每个单元格宽度都不一样的，默认是由文字的多少来决定，如果我们想控制这个宽度，那么就要设置每个单元格的宽度width

91e6bc31640071bdc013685f4d8c5ae3.png

来看效果，每个单元格就是一样宽了

0bfecdc5c2713241cef165e081e6af96.png

但是文字都是左对齐，我们要对其设置居中对齐center

d8dbcd84d90a26dd8a6cbd8f31b660c5.png

来看效果

9cc89cc3300fe20eef79119190572d23.png

现在就可以看到文字居中对齐了。

--- 笔记来自于B站【千锋教育】视频

- End -

详情请关注公众号---web分享

蒸汽猫marterio
关注
HTML5立体表格特效.rar
07-10
HTML5漂亮的立体表格特效，CSS3制作的圆角立体边框表格效果(通过css3设置圆角绘边框)。没有使用图片，但阴影效果很漂亮，看上去过滤很平滑，不过在打开网页的时候，似乎渲染的时间比较长。
html、css 实现一个漂亮的表格
热门推荐
Zhangguohao666的博客
12-06 8万+
利用html、css制作一个美观、大方的表格。（简单，易上手）
HTML 表格学习指南 - 打造精美且高效的数据展示方式
canshanyin的博客
06-18 2698
HTML 表格是一种常见且重要的网页元素，它能够以结构化的方式展示数据、信息和内容。在本详细指南中，我们将深入学习 HTML 表格的创建方法，包括表格的基本结构、样式设计、合并单元格、排序功能及无障碍访问性等，帮助你打造精美且高效的数据展示方式。通过 CSS 可以对表格进行样式设计，包括修改表格样式、改变表格的边框、颜色和间距，以及添加背景颜色和边框效果。在 HTML 表格中，我们可以使用 JavaScript 实现简单的表格排序功能。该代码使用了一个排序算法，根据点击的表头进行排序，支持升序和降序排序。
Div+CSS 制作漂亮表格
网站开发初中级代码参考-转载
05-18 1256
<html> <head> <style type="text/css"> #customers { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; } #customers td, #custom...
收藏十一种常用简单实用漂亮的HTML表格样式
jipin246的专栏
03-05 2万+
收集了十一种常用简单漂亮的表格样式。有时候用文章中用上表格，会显得段落分明的效果，收到意想不到的效果。我下面用的是第三种效果 第一种：单格样式，可以不定义宽度，把width="100%"去掉即可： bordercolorlight="#333333" border="0"> 晓龙工作室   第二种：
《初识电子表格》.ppt
10-28
《初识电子表格》.ppt 是一份介绍 Microsoft Excel 2003 基础知识的教程。Excel 是一款广泛使用的电子表格应用软件，属于 Microsoft Office 家族的一部分，主要用于数据管理和分析。以下是对这份教程内容的详细阐述...
中学信息技术-_《初识Excel》PPT课件.ppt
10-21
《初识Excel》是中学信息技术课程的一个重要部分，旨在引导学生了解并掌握基本的电子表格处理技能。在学习过程中，学生们将接触到Excel的各种基础功能，包括启动程序、认识工作界面、输入与编辑数据、调整表格格式、...
中学信息技术-_《初识Excel》PPT课件 (2).ppt
10-21
《初识Excel》这篇PPT课件主要介绍了Excel的基础操作，包括启动Excel、认识Excel窗口、调整表格列宽、修改工作表标签、保存文件与退出Excel以及简单的教学评价。以下是详细的知识点说明： 1. 启动Excel的方法： - ...
信息技术初识Excel.ppt
06-24
Excel不仅可以制作表格，还能执行复杂的计算和数据分析，进行数据管理，但不包括图像处理。 在Excel中，正确的术语是“工作簿”来描述整个电子表格文件，扩展名为.xls。判断题中，第一个说法正确，新建Excel文件...
初中信息技术初识Excel.ppt
12-27
Excel是Microsoft Office套件中的关键组件，专为电子表格处理设计，具有强大的计算、分析和图表制作功能。与Word中的表格不同，Excel的特色在于其内置的公式和函数，使得用户能够执行复杂的数值计算和数据分析。...
Html漂亮的table样式模板
干饭银的足迹——博客
08-23 7151
Html漂亮的table样式模板
HTML中Table表格的使用与漂亮的表格模板
pan_junbiao的博客
08-04 7万+
1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。 标记 说明 表格标记<table> <table></table>标记表示整个表格。<ta...
漂亮html表格页面模板,四款好看实用的CSS表格样式分享
weixin_34327476的博客
06-03 1万+
为了让用户拥有更好的阅读体验，将文章中数据以更直观的方式展示是非常必要的，因此，拥有良好的表格设计就显得非常重要了。下面，w3cschool就和大家分享4款好看且实用的CSS表格样式。具体操作：直接复制粘贴后即可在浏览器打开显示1.单像素边框CSS表格这是一个简单但是常用的表格样式。源代码：实例table.gridtable{font-family:verdana,arial,sans-se...
HTML 做个漂亮的表格
dhxb45678的博客
01-28 1万+
本期我们主要讲述怎样做一个简单漂亮的表格，外加一点关于 表格 这方面的一些笔记和注意点。 目录 相关笔记 一、基本结构 二、相关属性（可以直接写在标签里） 三、合并单元格 实践：做一个 biu特佛 的表格 相关笔记 一、基本结构 <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th..
html漂亮表格效果_初识表格简单制作
weixin_39622643的博客
12-01 660
我们来完成一个这样5行5列的一个表格在编写表格之前，我们先来认识一下HTML中表格的标签table表示整个表格；tr代表每一行；td代表每一个单元格；还是像之前一样，建立文件夹、目录、.html文件在HTML中编写标签如下现在我们看一下效果但是看起来很别扭，表格中没有边框，这是因为我们没有设置边框，默认边框为0我们给表格加入边框 border 属性再来看一下效果这个边框好像和我们一开始的也不太一样...
水之原 HTML - 创建漂亮的表格元素
最新发布
TdMaster的博客
10-01 946
HTML（超文本标记语言）是构建网页的基础语言之一，而表格元素是 HTML 中常用的一种组件，用于展示和组织数据。通过运用这些技术，你可以创建出各式各样的表格，满足不同需求的展示和组织数据的要求。除了基本的表格结构和样式，HTML 还提供了其他一些元素和属性，用于进一步定制表格。通过使用这些元素和属性，你可以更灵活地组织和展示表格数据，使其更具可读性和美观性。总结起来，HTML 提供了丰富的表格元素和属性，用于创建漂亮的表格。，我们合并了单元格之间的边框，使表格看起来更整洁。元素定义了表格的主体部分，而。
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
漂亮的HTML表格
Tonv 的专栏
05-16 6089
Info Header 1 Info Header 2 Info Header 3 Text 1A Text 1B Text 1C Text 2A Text 2B Text 2C
Boostrap对HTML的表格的设计和优化
昊虹AI笔记
09-14 1378
Boostrap对HTML的表格的设计和优化
问题 A: 实验11_4_初识链表
05-26
以下是一个简单的链表实现代码示例： ```c++ #include using namespace std; // 定义链表节点结构体 struct ListNode { int val; ListNode *next; ListNode(int x) : val(x), next(NULL) {} }; // 创建链表 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值