2. 程式人生 > >普通table表格樣式大全

普通table表格樣式大全

阿新 • • 發佈：2019-01-25
 普通table表格樣式及程式碼大全(全) 普通table表格樣式及程式碼大全(全)(一)

單實線邊框表格

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>單實線邊框表格</DIV></TD></TR></TBODY></TABLE>

虛線邊框表格

<TABLE style="BORDER-RIGHT: #ff6600 1px dashed; BORDER-TOP: #ff6600 1px dashed; BORDER-LEFT: #ff6600 1px dashed; BORDER-BOTTOM: #ff6600 1px dashed; BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>虛線邊框表格</DIV></TD></TR></TBODY></TABLE>

點線邊框表格

<TABLE style="BORDER-RIGHT: #ff6600 2px dotted; BORDER-TOP: #ff6600 2px dotted; BORDER-LEFT: #ff6600 2px dotted; BORDER-BOTTOM: #ff6600 2px dotted; BORDER-COLLAPSE: collapse" borderColor=#ff6600 height=40 cellPadding=1 width=250 align=center border=2>
<TBODY>
<TR>
<TD>
<DIV align=center>點線邊框表格</DIV></TD></TR></TBODY></TABLE>

雙實線邊框表格

<TABLE borderColor=#000000 height=40 cellPadding=1 width=250 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV align=center>雙實線邊框表格</DIV></TD></TR></TBODY></TABLE>

槽線邊框表格

<TABLE style="BORDER-RIGHT: #00f901 10px groove; BORDER-TOP: #00f901 10px groove; BORDER-LEFT: #00f901 10px groove; BORDER-BOTTOM: #00f901 10px groove; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>槽線邊框表格</DIV></TD></TR></TBODY></TABLE>

脊線邊框表格

<TABLE style="BORDER-RIGHT: #00f901 10px ridge; BORDER-TOP: #00f901 10px ridge; BORDER-LEFT: #00f901 10px ridge; BORDER-BOTTOM: #00f901 10px ridge; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>脊線邊框表格</DIV></TD></TR></TBODY></TABLE>

內凹效果邊框

<TABLE style="BORDER-RIGHT: #00f901 10px inset; BORDER-TOP: #00f901 10px inset; BORDER-LEFT: #00f901 10px inset; BORDER-BOTTOM: #00f901 10px inset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>內凹效果邊框</DIV></TD></TR></TBODY></TABLE>

外凸效果邊框

<TABLE style="BORDER-RIGHT: #00f901 10px outset; BORDER-TOP: #00f901 10px outset; BORDER-LEFT: #00f901 10px outset; BORDER-BOTTOM: #00f901 10px outset; BORDER-COLLAPSE: collapse" borderColor=#00f901 height=40 cellPadding=1 width=250 align=center border=10>
<TBODY>
<TR>
<TD>
<DIV align=center>外凸效果邊框</DIV></TD></TR></TBODY></TABLE>

內虛外實邊框

<TABLE style="BORDER-TOP-STYLE: solid; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; BORDER-BOTTOM-STYLE: solid" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px dashed; BORDER-TOP: #4a4a84 2px dashed; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px dashed; BORDER-BOTTOM: #4a4a84 2px dashed">
<DIV align=center>內虛外實邊框</DIV></TD></TR></TBODY></TABLE>

外虛內實邊框

<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=#4a4a84 height=40 cellSpacing=8 cellPadding=2 width=250 align=center bgColor=#ffffff border=2>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: #4a4a84 2px solid; BORDER-TOP: #4a4a84 2px solid; BACKGROUND: #ffffff; BORDER-LEFT: #4a4a84 2px solid; BORDER-BOTTOM: #4a4a84 2px solid">
<DIV align=center>外虛內實邊框</DIV></TD></TR></TBODY></TABLE>

無邊框表格

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cellPadding=1 width=250 align=center bgColor=#fffbec border=0>
<TBODY>
<TR>
<TD>
<DIV align=center>無邊框表格</DIV></TD></TR></TBODY></TABLE>

隱藏下邊框

<TABLE style="BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-BOTTOM: medium none" height=40>隱藏下邊框</TD></TR></TBODY></TABLE>

隱藏上邊框

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#111111 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none" height=40>隱藏上邊框</TD></TR></TBODY></TABLE>

隱藏左邊框

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-LEFT: medium none" height=40>隱藏左邊框 </TD></TR></TBODY></TABLE>

隱藏右邊框

<TABLE style="BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none" height=40>隱藏右邊框 </TD></TR></TBODY></TABLE>

隱藏左右邊框

<TABLE style="BORDER-LEFT-WIDTH: 0px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-RIGHT: medium none; BORDER-LEFT: medium none" height=40>隱藏左右邊框 </TD></TR></TBODY></TABLE>

隱藏上下邊框

<TABLE style="BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-COLLAPSE: collapse" borderColor=#ff6600 bgColor=#DFFFDF cellSpacing=0 cellPadding=0 width=250 align=center border=1>
<TBODY>
<TR align=middle>
<TD style="BORDER-TOP: medium none; BORDER-BOTTOM: medium none" height=40>隱藏上下邊框</TD></TR></TBODY></TABLE>

只顯示上邊框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=above>
<TBODY>
<TR align=middle>
<TD height=40>只顯示上邊框</TD></TR></TBODY></TABLE>

只顯示下邊框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=below>
<TBODY>
<TR align=middle>
<TD height=40>只顯示下邊框</TD></TR></TBODY></TABLE>

只顯示左邊框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=lhs>
<TBODY>
<TR align=middle>
<TD height=40>只顯示左邊框</TD></TR></TBODY></TABLE>

只顯示右邊框

<TABLE borderColor=#ff6600 bgColor=#FFD2D2 cellSpacing=0 cellPadding=0 width=250 align=center border=1 frame=rhs>
<TBODY>
<TR align=middle>
<TD height=40>只顯示右邊框</TD></TR></TBODY></TABLE>

不顯示任何邊框

<TABLE borderColor=#ff6600 cellSpacing=0 cellPadding=0 width=250 align=center bgColor=#fffbec border=1 frame=void>
<TBODY>
<TR align=middle>
<TD height=40>不顯示任何邊框</TD></TR></TBODY></TABLE>

單行單列

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD height=40>
<DIV align=center>單行單列</DIV></TD></TR></TBODY></TABLE>

一行多列

一行多列

一行多列

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD>
<TD width=100>
<DIV align=center>一行多列</DIV></TD></TR></TBODY></TABLE>

一列多行

一列多行

一列多行

<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 cellSpacing=0 width=300 align=center bgColor=#ffffff border=1>
<TBODY>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD>
<TR>
<TD>
<DIV align=center>一列多行</DIV></TD></TR></TR></TR></TBODY></TABLE>

相關推薦

普通table表格樣式大全

 普通table表格樣式及程式碼大全(全) 普通table表格樣式及程式碼大全(全)(一) 單實線邊框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#000000 height=40 cell

mvc中，不適用任何table表格樣式進行標題（table的首行）的固定展示

效果圖： 1.table的格式  <div class='Table-Cont' id='Table-Cont'>             <table class="table table-res

用python解析word檔案（段落篇（paragraph） 表格篇（table） 樣式篇（style））

首先需要安裝相應的支援庫： 直接在命令列執行pip install python-docx 示例程式碼如下： import docxfrom docx import Document #匯入庫 path = "E:\\python_data\\1234.docx" #檔案路徑document = Doc

table自定義表格樣式

前言： 自定義表格樣式，有一些自定義的需求，整理成通用樣式就可以複用了 1，table表格每一列可以自定義寬度 2，table表格每一列中的每一項超出寬度不換行並顯示省略號... <!DOCTYPE html> <html lang="zh"> <he

iview table表格的自定義樣式

export default { data () { return { selecteds: [], columns4: [ { type: 'selection', width: 6

如何去掉bootstrap table中表格樣式中橫線豎線

            修改之前，表格看上去比較擁擠，因為bootstrap table外掛中自帶斑馬線表格樣式，有橫線和豎線分欄，現在我們不需要這些。應UI設計的要求，要去掉中間的橫線和豎線，使用了修改需求中一種簡單粗暴的修改方法，打卡網頁F12鍵，找到橫線豎線所對應的位置，直接新增程式碼border:0p

CSS3:nth-child()偽類選擇器，Table表格奇偶數行定義樣式

原文地址：http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的強大，讓人驚歎，人們在驚喜之餘，又不得不為其艱難的道路感到可惜：好的標準只有得到行業瀏覽器的良好支援才算得上“標準”。CS

table表格細邊框最簡單樣式

建table是，最簡單的是: <table border="1">   <tr>       <td>123abc</td>       <td>123abc</td>       <td>

table表格某一td內容太多導致樣式混亂的解決方案

問題在開發過程難免遇到這樣那樣的問題。對於有很多條目的資料，我們通常採用table元素來快速實現。如果某一個td的內容太多的話就會出現下面的情況，導致樣式混亂難看： 解決方案要讓table的寬度固定我們可以給table元素設定table-layout:fixed;樣式，但這

用js將HTML的Table匯出為Excel（可自定義：表格樣式+Excel名稱）

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" la

table表格做一個表頭斜線樣式

* { margin: 0; padding: 0; } table { border: 1px solid #fff; /*去掉表格之間的空隙*/

在原生js中的，table表格，display：block之後，樣式混亂

display:blockdisplay:block是可以把非塊級元素強制轉換為塊級元素顯示，如內嵌元素span，原來不支援設定寬高，寬度是由內容撐開的;display:table-rowtable-row:指定物件作為表格行，類同於html標籤<tr>問題如下當

CSS設定html table表格邊框樣式

之前就有些迷糊 table tr行 th表頭 td表格單元 th會預設加粗顯示 1.只對table標籤設定紅色邊框樣式 */ able-a table{border:1px solid #333} 2、對td設定邊框 表格中

selenium處理table表格

處理 輸入 table 所有 指定 固定 pat 你會 driver 在UI自動化測試中經常會遇到表格的處理，下面是一點心得。 假設網頁頁面有一個表格，如何獲取這個table的指定cell的值？你會說我們可以根據xpath定位到這個cell的行列，然後getText（），不

學習10 table表格制作標簽

round utf-8 oct cnblogs meta ack logs 數據 con <!doctype html> <html> <head> <meta http-equiv="content-type" content=

table表格中文字超出顯示省略號

overflow ops nbsp wrap 標簽 內容 over -m hit 第一步： table {table-layout：fixed；}列寬由表格寬度和列寬度設定，不隨文字多少變化 第二步： td { white-space:nowrap;/*文本不會換行，文本會

css 樣式大全

side flow overflow square 重復 stat mono osi 變體 [轉載]昵稱：lhyterry 字體屬性：(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位

css樣式大全(整理版）

變體 parent 固定背景 鼠標 背景圖 文本樣式 repeat-y ica 格式 字體屬性：(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD 樣式 {font-styl

java循環取出word table表格中所有的值

word//往表格裏面插入值或者打開表格填寫<%@ page language="java" import="java.util.*, java.awt.*" pageEncoding="gb2312"%><%@page import="com.zhuozhengsoft.pageoffic

第十三篇 JS 操作table表格

span 正常 tex 依次 語法 文檔 ++ 它的 方向 JS 操作table表格 這節課難度可能高一點，因為沒有提前解釋if判斷、for循環。這節課是直接把這兩樣用上了，老師先簡單介紹一下： if，判斷語句，判斷就很簡單了嘛，假如說1=1(1等於1)，當然是真的了對吧，