如何在Dreamweaver中制作表格美化页面

html-css04

如何在Dreamweaver中制作表格美化页面,第1张

使用表格美化页面是很多年前以前流行的做法,现在网页都在使用div+css来美化页面。

使用表格美化页面也就是利用表格的结构固定不同的网页元素,让网页元素按照预想的设计有序地排列,达到美观的效果。

比如制作一个类似百度知道这样布局的页面,用表格大致可以如此设计

大体搭建之后,可以再利用表格的对齐、单元格的拆分、合并、表格嵌套等功能细致设计每个网页元素的位置,然后可以在表格插入图片、表单、文字等等,可以通过修改表格边框、网页背景色、表格背景色、图片、文字颜色、字体等等综合在一起进行网页美化。

kable_styling()设定表格整体,它会自动应用bootstrap风格主题。

它的可选参数:

bootstrap_options设定主题。可选值有striped, bordered, hover, condensed, responsive。

full_width设定是否响应屏幕大小。TRUE和FALSE取值。full_width=F,不随着屏幕大小变化而变化。

Position设定屏幕足够大时表格位置。可选值为center, left和right。分别为居中,左偏,右偏。

Font_size设定表格内文字大小。

fixed_thead = T时,调整表头以适应屏幕。

column_spec(kable_input, column, width = NULL, bold = FALSE,

italic = FALSE, monospace = FALSE, underline = FALSE,

strikeout = FALSE, color = NULL, background = NULL,

border_left = FALSE, border_right = FALSE, width_min = NULL,

width_max = NULL, extra_css = NULL, include_thead = FALSE)

row_spec(kable_input, row, bold = FALSE, italic = FALSE,

monospace = FALSE, underline = FALSE, strikeout = FALSE,

color = NULL, background = NULL, align = NULL, font_size = NULL,

angle = NULL, extra_css = NULL, hline_after = FALSE,

extra_latex_after = NULL)

column_spec()选中列

row_spec()选中行

row_spec(0)选中变量名

这些函数内可以添加各种参数,包括:

bold = T,加粗

strikeout =T,加删除线

monospace = T,等宽字体

underline = T,下划线

color,设定表中数据颜色

background,设定背景颜色

angle,设定角度

1、新建一个html文件,命名为test.html,用于实现点击隐藏表格指定列的功能。

2、在test.html页面,使用table标签创建四行三列的表格,<caption></caption>作为标题,下面将给它绑定点击事件,实现点击隐藏价格列。

3、使用css美化表格,设置表格的边框、字体大小、对齐方式、内边距等样式,代码如下。

4、使用js中的window.onload方法,在页面加载的时候执行function函数,下面将在function函数内实现隐藏表格列逻辑。

5、使用js中的document.getElementsByTagName()方法获得表格对象,并赋值给tab变量,用于下面获得表格内的caption对象。

6、最后在浏览器运行test.html文件,当点击“隐藏价格”时,把价格列隐藏 ,实现在table表格中使用js隐藏指定列的功能。