使用表格美化页面是很多年前以前流行的做法,现在网页都在使用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隐藏指定列的功能。