swing背景圖片怎麼放在table下

㈠ 我怎麼在table的<tr>中加背景圖片呢

無論是td還是tr都沒這個屬性.可以在裡面嵌一個帶background屬性的對象, 比如在該tr中只用一個td (這樣它可以擴展到一整行), 然後在td中放一個table, 在table的屬性中用<table background=url>來指定背景, 這時你可以繼續用tr, td, 不過它是裡面那個table的tr, td.

當然, 還要注意一下cellspacing及cellpadding等的設置.

你看一下Dreamweaver, 它的布局表格中經常是層層嵌套的. 還有, 很多網站的網頁同樣有很多個table層層嵌套的做法.

㈡ Swing設置窗體背景圖片問題！郁悶。。

你要把把圖片作為最底層的JPanel（-30000），其他組件可以放在201，305之類的層上就不會覆蓋了。這是代碼： （建議你google一下JLayeredPane的用法）
……
ImageIcon img1 = new ImageIcon("pic/background.jpg");
JLabel bg = new JLabel(img1);//每次導入即聲明一個對象
……
// 下面做背景，初始化背景
this.getLayeredPane().add(bg,new Integer(-30000));
bg.setBounds(0, 0, img1.getIconWidth(), img1.getIconHeight());
((JPanel)getContentPane()).setOpaque(false);

㈢ java swing 中，一個界面上有一個表格 我想把表格加一個背景圖片，怎麼實現急！求大家幫幫忙！非常感謝

import java.awt.*;
import javax.swing.*;

public class BackImage {
public static void main(String args[]) {
ImagePanel table=new ImagePanel("d:/applet/images/img0.jpg",10,10);
JFrame frame=new JFrame("圖片背景");
frame.setSize(table.getSize());
frame.getContentPane().add(table);
table.setGridColor(Color.black);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
class ImagePanel extends JTable { //重寫JPanel類
private Image img;

protected ImagePanel(String image,int rows,int cols) {
super(rows,cols);
img=new ImageIcon(image).getImage(); //獲取背景圖像
Dimension d=new Dimension(img.getWidth(this),img.getHeight(this));
this.setPreferredSize(d);
this.setMaximumSize(d);
this.setMinimumSize(d);
this.setSize(d);
this.setRowHeight(d.height/10);
this.setLayout(null); //把JPanel子類的布局管理器設為空
}

public void paintComponent(Graphics g) { //覆蓋JPanel類的paintComponent()方法
super.paintComponent(g);
g.drawImage(img,0,0,this); //重繪JPanel子類的背景
}
}

㈣ swing中如何讓表格中顯示圖片

//表格大小就自己調了,我只給出顯示的方法

import java.util.Vector;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.table.DefaultTableModel;

public class TableIco extends JFrame {
private static final long serialVersionUID = 1L;
private ImageIcon la = new ImageIcon(TableIco.class.getResource("1.jpg"));
private ImageIcon lb = new ImageIcon(TableIco.class.getResource("2.jpg"));
private JTable ta = null;
private JScrollPane pan = null;
private DefaultTableModel model = null;

public TableIco() {
this.setBounds(200, 200, 400, 300);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
model = new IconModel(new Object[][] { { la }, { lb } },
new Object[] { "只顯示如片" });
ta = new JTable(model);
pan = new JScrollPane(ta);
this.getContentPane().add(pan);
this.setVisible(true);

}

public static void main(String[] args) {
new TableIco();
}

}

class IconModel extends DefaultTableModel {
private static final long serialVersionUID = 1L;

public IconModel(Object[] cnames, int row) {
super(cnames, row);
}

public IconModel(Object[][] data, Object[] columnNames) {
super(data, columnNames);
}
//important here
public Class<?> getColumnClass(int col) {
Vector<?> v = (Vector<?>) dataVector.elementAt(0);
return v.elementAt(col).getClass();
}

public boolean isCellEditable(int row, int col) {
Class<?> columnClass = getColumnClass(col);
return columnClass != ImageIcon.class;
}
}

㈤ 如何在swing裡面設置背景圖片

你的代碼是正確的，可能是你圖片的位置沒有放對。我本地試過了，你可以像下面這樣做：

首先修改一行代碼：/res改為res

Image image=new ImageIcon("res/bg.jpg").getImage();

圖片放到：

㈥ java中的swing設計界面時怎麼加上背景圖片。而不覆蓋什麼label等控制項

通過以下方式設置下背景就可以了：

background=newImageIcon("images/backImage.png");

backImage=newJLabel(background);

backImage.setBounds(0,0,background.getIconWidth(),

background.getIconHeight());

backPanel=(JPanel)this.getContentPane();

backPanel.setOpaque(false);

this.getLayeredPane().setLayout(null);

this.getLayeredPane().add(backImage,newInteger(Integer.MIN_VALUE));

backPanel.setLayout(newBorderLayout());

這樣就可以把圖片放在最下面了，效果圖：

㈦ java swing 怎樣讓Jtable透明化或者在jtable上加背景圖片

import java.awt.Component;
import java.awt.Container;

import javax.swing.ImageIcon;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTable;
import javax.swing.table.TableCellRenderer;

public class aaa {
public aaa() {
}

public static void main(String[] args) {
JFrame frame = new JFrame("背景透明展示");
ImageIcon icon = new ImageIcon("003.jpg");
JLabel lab = new JLabel(icon); // 將圖片放入到label中
lab.setBounds(0, 0, icon.getIconWidth(), icon.getIconHeight()); // 設置放有圖片的label的位置
JTable t = new JTable(20, 3) { // 設置jtable的單元格為透明的
public Component prepareRenderer(TableCellRenderer renderer,
int row, int column) {
Component c = super.prepareRenderer(renderer, row, column);
if (c instanceof JComponent) {
((JComponent) c).setOpaque(false);
}
return c;
}
};
t.setOpaque(false); // 設置jtable本身為透明的
frame.getContentPane().add(lab, -1); // jframe本身是窗體，不能放置任何組件，用getContentPane()方法得到frame的默認內容面板，將lab放入其中，-1表示放入面板的下層
frame.getContentPane().add(t, 0); // 0表示放在面板的最頂層
Container con = frame.getContentPane();
((JPanel)con).setOpaque(false); // 設置面板為透明的
frame.setSize(500, 500);
frame.setVisible(true);
}
}

㈧ 怎麼在table中加背景圖片

無論是td還是tr都沒這個屬性.可以在裡面嵌一個帶background屬性的對象, 比如在該tr中只用一個td (這樣它可以擴展到一整行), 然後在td中放一個table, 在table的屬性中用<table background=url來指定背景, 這時你可以繼續用tr, td, 不過它是裡面那個table的tr, td.
當然, 還要注意一下cellspacing及cellpadding等的設置.
你看一下Dreamweaver, 它的布局表格中經常是層層嵌套的. 還有, 很多網站的網頁同樣有很多個table層層嵌套的做法.

㈨ 怎麼設置table欄背景圖片

編輯導語：在B端產品中，數據主要通過表格的形式展現，表格的易讀性和易操作性設計，對提升B端用戶的操作效率來說十分重要；本文是作者從實際工作出發，結合項目和過去經驗對於復雜業務類的表格設計的一次總結。

一、表格的介紹 1. 表格的定義

表格（Table）：又稱為表，是用來收集、整理、組織、分析數據的二維矩陣；它既是一種可視化交流模式，又是一種組織整理數據的手段。

2. 表格的構成元素

通常表格的組成元素以及相關元素會有多個部分，筆者根據自己設計表格的工作經驗將表格概括為容器、篩選區、功能性按鈕、表頭、表體以及底欄等六個部分。

其各個部分包含的相關元素如圖所示：

• 容器：包含表格的所有內容。

• 篩選區：包括搜索和條件篩選。方便用戶快速查詢定位數據，一般位於表格上方。

• 功能性按鈕：比如常見的[新增]按鈕和各種批量操作按鈕。

• 表頭：說明數據的內容，可以包含篩選、排序等功能。

• 表體：包含行和列數據，按列可以分為多選列、數據列、操作列。（多選列=多選框；數據列=呈現業務展現需要的信息；操作列=針對單行數據的操作按鈕，比如管理、編輯信息等。）

• 底欄：包含數據量、單頁條目、總條目、分頁等，底欄數據也可以放置在表格頂部。

• 3. 表格的樣式

1）幾種常見的風格樣式：

• a.網格型：表格有均勻而明顯的分割線，邊框單元格比較明顯。

• b.水平線型：僅顯示水平線可減少整個網格的視覺雜訊。

• c.斑馬條紋型：隔行交替使用不同底色來區分數據。

• d.自由形式：移除所有分割線，通過盡可能減少視覺雜訊來創建極簡外觀。

2）關於樣式的選取技巧

• 網格型：對於數據之間的關系緊密（列信息較多而沒有足夠空間用留白來分割信息）且有對比關系的。

• 水平線型：它能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數據對比時的速度；因此對於所有數據集大小，此樣式都是最常見的。

• 斑馬條紋型：每行交替使用不同的顏色背景是幫助用戶在閱讀時保持其位置的另一種好方法；對於較大的數據集，建議使用此樣式，在較大的數據集中，交替模式將很清晰，並且不會引起特定行突出顯示的混亂。

• 自由形式：對於小型數據集，如果用戶在閱讀時不需要幫助就可以保持位置，則建議使用此樣式。

信息內容的有效傳達是表格設計的本質，就表格本身而言應該是隱型的，應該讓用戶注意力聚焦在核心內容上。

所以，邊框的顏色應非常淡，不能妨礙快速瀏覽。

二、表格的設計技巧

表格是為可讀性而生的，一個結構清晰的布局能大大提升用戶對信息的接收速度和理解程度。

因此，設計易讀、易掃視、易比較、易操作的表格結構是表格設計的首要目標。

下面我將以公司財務中台的表格改版為例，逐步說明表格中每個結構的設計。

這是改版前後樣式對比圖：

1. 篩選區設計

篩選區可以看作表格的導航，由搜索和篩選這兩部分組成。

一般搜索和篩選會同時出現，但是兩者一般很少同時使用來對數據進行定位——搜索更多的是對單一或者包含某個欄位的的數據來進行定位；篩選則是用來查詢一類數據。

根據MECE分析法，篩選區可以有以下的表現形式：

• 常用搜索少用篩選：若篩選項多，可以選擇隱藏篩選項，篩選少可以展示出來；

• 搜索和篩選都常用：可以將搜索和篩選都展示出來；

• 常用篩選少用搜索：篩選和搜索同時展示；

• 篩選和搜索都不常用：展示搜索隱藏篩選。

1）搜索

在樣式上，搜索可以分為簡單搜索、標簽搜索、高級搜索等三類。

• 簡單搜索：由一個搜索框和一個按鈕組成，可以輸入一個或多個條件進行搜索。

• 標簽搜索：在簡單搜索的基礎上加上標簽，即先選標簽，在輸入搜索內容。

• 高級搜索：即點擊更多展開其他搜索條件，減少了更多條件對用戶的干擾，但降低了易發現性。

2）篩選

根據篩選的位置，可以分為標簽篩選、表頭篩選兩類。

3）案例小講堂

對於數據集較大的B端系統來說，往往篩選條件比較多，都將其展示出來會導致空間佔比過大，影響了用戶對表格信息的獲取。

下面以我公司的財務中台為例，講講如何優化篩選區，希望對大家有所啟示。

① 版本中篩選區樣式：

篩選條件全部展開，目的是讓用戶對信息進行快速的查詢、過濾，以快速准確完成目標任務。

但業務復雜，數據集過多少，篩選條件也相應增加（空間佔比大），看起來非常冗餘，不利於快速定位目標。

為了平衡掃描、查詢、過濾、分析等這些操作，復雜業務的表格區篩選需要進行一定的優化處理，這樣才能滿足滿足業務需求同時，又符合用戶心智模型。

方案A：整齊劃一。

整合篩選項，採用表頭篩選+標簽篩選的樣式，縮減篩選區的頁面空間佔比。

討論結果：雖然這個方案使篩選區的空間佔比縮小，整體頁面也看似整潔不少。但表頭篩選在復雜的業務系統中存在幾個弊端：

• 數據集往往很龐大，表格不能展示所有欄位，往往採用列固定的形式來呈現數據的完整性。以財務中台為例，高頻篩選功能已被遮擋（如上圖），篩選前需先對表格進行橫向滾動，無端增加操作；

• 應無法展示全部欄位，用戶無法清晰的感知到篩選了哪些內容，增加認知學習成本；

• 表頭中的屬性並不是都可以進行篩選，用戶不可感知哪些可以篩選，需要滑動表格檢索。

方案B：強調主次關系。

採用展開式的標簽篩選樣式，對不常用的篩選項做隱藏處理。

但因業務場景的復雜度，高頻篩選功能還是很多，沒有解決本質的問題，如下圖：

方案C：分狀態展示（逐漸呈現）。

在方案B的基礎上進行了優化。

提煉與流程相關的狀態，按步驟顯示，每一步只顯示當前需要關注的內容，如圖：

狀態的提煉過程

整理每個單據的狀態，理清關系：

結合業務流程可以很明顯的注意到，單據只有通過了審核才能收款，只有收款才能進行核銷。狀態是一種遞進關系（審核 收款 核銷）。

結合財務人員的工作流，提煉出單據的以下幾種狀態，之前存在到問題（表格中單行數據的操作不一致），也得到了完美的解決。如圖：

2. 功能區按鈕設計

1）按鈕的表現形式

建議在復雜系統設計中使用圓角矩形的按鈕樣式。

理由如下：

a. 人眼處理圓角更容易（認知負荷說）：

• Jürg Nnni（Visual Perception的作者）表示：視網膜中區處理正圓形的時候是最快速的，而處理邊邊角角的時候則比較費力，大腦處理的速度也較慢。於是，長得圓潤的圓角矩形相較於一般矩形，對於使用者來說就容易接納許多。

• Barrow Neurological Institute （巴羅神經病學研究）的研究也顯示：一個物體的顯著度與邊角的角度呈線性變化，銳角相較於鈍角要顯得更明顯突出；換句話說，角度越尖銳，物體就看起來越明亮；而越明亮的物體就越難以直視。

b. 使相似的內容更容易被區別：

舉個例子，如下圖所示，即便間距相同，B排的圓角矩形辨識度還是明顯比A 排的矩形高。

這是為什麼呢？

首先，第一眼看過去的時候，A 排的矩形整體是連在一起的，中間找不到斷點；而B 排矩形，因為有圓角的關系，所以斷點很明顯。

其次，兩種矩形的視覺聚焦：

• A 排由於直角的關系，視覺聚焦向外推，整體的效果比較發散；這會使得第一眼看過去的時候，容易分不清楚哪一條邊框屬於哪一塊矩形。

• 反之B 排因為圓角收攏的關系，視覺聚焦向中心推，區塊就比較容易區別開來。

綜上所示，圓角矩形是非常有效率的容器，在復雜場景業務中（存在很多種功能型按鈕），按鈕採用圓角矩形樣式最提效。

這里要注意，圓角不是越大越好。

在相同面積中，按鈕的可操作區域隨著圓角的增大而遞減，因此在同等尺寸下的按鈕中，小圓角的按鈕明顯比大圓角的按鈕更容易操作。

同時在實際業務中，按鈕常常被當作原子與下拉框聯動組成下拉菜單控制項；如若使用半圓按鈕則無疑增加了下拉框的設計難度並且匹配起來也會略顯突兀。

2）批量操作按鈕的位置思考

來看個舉個例子（針對財務中台批量操作的優化方案）：

現存問題：

方案A：信息前置。

批量操作按鈕全部展開不做折疊處理，信息前置來降低認知成本，方便用戶記憶。

討論結果：對於復雜業務來說，會有很多批量操作功能，按鈕很多，造成頁面擁擠，進而影響用戶操作體驗；一個位置出現2個主按鈕樣式，不推薦。

方案B：沉浸式操作體驗。

對於一開始不可用的批量操作按鈕進行隱藏，勾選激活狀態，顯示在篩選區。

討論結果：方案B的阻斷性強 — 無法兼顧批量操作和數據篩選功能，無法滿足復雜系統的場景操作。

方案C：上內容下操作，前2個方案的優化。

不做隱藏，類灰布置於底部。勾選觸發操作條件，未做勾選時，用戶點擊時給出引導操作提示。

為什麼選擇方案C？理由如下：

首先，根據古騰堡原則，用戶的在做表格操作的時候，視覺流是左做到右，從上到下，方案A和方案B的視覺落腳點在表格的上方，顯然是不符合眼動規律的。

其次，批量操作的功能屬於財務中台的核心功能點，隱藏不是第一選擇，而是類置灰的特除處理（在按鈕旁給提示信息）。

3. 表頭設計

表頭在能夠概括的情況下，盡量簡練、准確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。

如果精簡後的生僻欄位難以自我解釋，可以跟一個釋義標識，滑鼠懸停時出現該欄位的詳細解釋；同時滿足新手用戶、普通用戶以及專家用戶的需求。

4. 表體設計

1）數據對齊方式

在數據的對齊方式上，有以下3個建議：

• 文本左對齊；

• 數字右對齊；

• 表頭與信息內容對齊方式一致。

文本左對齊，符合正常的心智模型（閱讀習慣從左到右）；表頭與內容對齊一致，則是為了簡化和降低視覺噪音，以便更好的獲取數據信息；數字右對齊，有利於數據間的對比。

要注意的一個細節，例如：當列數＝2的時候，由於列與列直接的間距過大，導致兩者的關聯性較弱，如圖：

這時又該如何處理？

為了增強列與列之間的相關性，當滑鼠hover在行的時候，產生高亮。這種方式可能不是最優的，但目前只能想到這種方法，如果讀者有更好的想法歡迎留言。

2）數字的字體選擇

建議選用：Helvetica Neue、Helvetica、Arial、sans-serif，

蘋方在數字字元上，不同數字寬度不一致，導致千位分隔符不在一條線上；而Helvetica Neue數字等寬，千位分隔符有序的排列在一條線上；所以，選擇Helvetica Neue作為數字字體的首選字體，數值上下對比的時候，相同位置的數字在同一條豎線上，更加容易對比。

3)對操作項進行「解耦」處理

在財務中台系統中，常常由於許可權的不同或者單據狀態不同這兩種原因，使得每行的數據擁有不同的操作項，如下圖所示：

存在的問題：

• 當信息過載，操作項這個list非常長的話，頁面將會非常擁擠；

• 文字按鈕因為視覺特徵比較明顯，造成了不必要的分散注意力；

• 誤操作率相對較高，同樣因為表格空間有限，當操作區非常靠近，很容易一不小心就點錯了。

針對這個問題所出的解決方案，如下：

方案A：下拉框樣式。

討論結果：下拉框中可能存在不同操作，同樣避免不了誤操作這個問題。

方案B：錯位顯示。

討論結果：首先，這樣的設計浪費大量的屏幕空間；其次，浪費開發工作量！因為在列表中實現一系列許可權判斷和操作，在詳情界面中往往還需要再開發一次相同的許可權判斷和操作；再次，不同單據可能存在操作順序不一樣，上下移動滑鼠會存在不同操作，用戶代價非常高。

方案C：以不變應萬變。

回歸『一個界面一個用戶任務』的原則，列表中的單行數據只保留「查看」或「管理」操作，所有其它的單獨操作都去往該單據的詳情界面完成。

討論結果：從開發的角度上看，此方案界面高度解耦，功能迭代方便，節約開發工作量；從認知成本上看，列表界面操作高度一致性，利於養成用戶習慣；從操作效率上看，在詳情頁用戶會明顯確認目標單據，幾乎不會誤操作； 同時此方案節約了大量屏幕空間，更有利於用戶對信息的獲取；

4）關於表格中套表格的解決方案

場景：在財務中台中，有這樣一種用戶，需要對表格內的數據進行對比並編輯。

來看看之前的頁面：

這樣處理的不足點：

• 在查看和編輯信息時，無效的信息太多。降低了獲取信息的效率；

• 切換單條數據時，頁面出現跳動，無法快速檢索到相對應的信息。

對此，在這個版本中，我們對其做了相應的優化——運用側視圖（快速視圖）的方式來呈現信息；一旦選擇一個單據，它就會從側面彈出的。

這個方案，它可以保持上下文，易於使用，即使是在垂直滾動視圖中顯示大量欄位的情況下也效果良好。同時信息呈現的地方是固定的，利於檢索，查找。

5）行高的制定方法

開始之前首先明確一下開發是怎麼實現行高的。

從上圖可以看出，開發在實現設計稿時，通常是按照行高來寫的。

因此，表格行高=文字行高+上下間距。

其中，文字行高可以設定為字型大小的1.2~1.8倍，上下間距可以設定為字型大小的1~1.5倍；行高影響每行信息的易讀性。

除了上述的做法外，還有以下2種做法，來保證各場景下獲取信息的效率與易讀性。

做法1：不同解析度使用不同行高。

設計兩套不同的行高，在大解析度下顯示較高的行高，給數據間提供更多呼吸的空間；在小解析度下顯示較小的行高，使一屏內可以看到更多的行高。

Gmail就是這樣設計的，如下圖所示：

做法2：自定義行高。

自定義行高為興奮需求，可以提高用戶的用戶體驗。

所以我們可以視表格的具體情況來設計設置行高的形式，可以放置在設置按鈕里，也可以在外部按鈕較少的情況下展示出來。

5. 底欄設計

表格的底欄，底欄也是不可缺少的一部分，承載的作用主要是告訴用戶數據條數以及當前位置。

分頁的設計是根據不同的場景進行選擇最優的設計方案；在不需要定點跳轉的場景，建議建議刪除跳頁，刪除多於的功能，使頁面簡潔、清爽。

三、其他設計細節 1. 空白單元格的處理

表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有載入出來嗎？

明智的做法，是無數據時用「-」來填充顯示，數據為零時與上下數據單位、小數點相同的0來顯示。

2. 減少圖形元素的使用

盡量減少視覺符號的使用，因為視覺符號可能會使你的用戶界面復雜，產生難以理解的內容；去除不必要的視覺干擾，例如不必要的圖標、無規律的色彩等。

3. 省略 （氣泡展示位置）

當列表中數據過長時，我們需要根據屏幕寬度調整列表展示方式，超過列表默認寬度的內容可以省略，通常用「…」表示，滑鼠移入後出現氣泡展示全部內容。

位置：建議展示在上方，因為我們的閱讀順序是從上到下，滑鼠向下移動時不會被上面的氣泡遮擋住。

氣泡麵積不宜過大，根據屏幕尺寸控制在一定比例，一版不超過內容區的四分之一，展示不下的內容可以在氣泡中增加滾動條。

四、後記

感謝閱讀！本文結合了實際項目經驗對表格設計做了一次總結，在具體項目中，你可能需要根據產品特性和用戶需求進行調整。

如果你還有什麼好的想法和建議，可以在評論里留言討論。

參考文獻：

data table

Ant Design

web表格設計攻略

Web頁面中的表格設計，遠沒那麼簡單

B端設計指南03-按鈕

本文由 @Nick 原創發布於人人都是產品經理，未經許可，禁止轉載

題圖來自Unsplash，基於 CC0 協議