08：CSS設定表格樣式

阿新 • • 發佈：2018-11-06

1.一個簡單的表格
table.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格樣式</title>
    <link href="box.css" type="text/css" rel="stylesheet">
</head>
<body>
  <center>
  <table class="class">
      <caption 
>課程表</caption>
        <tr>
            <th>星期\課程</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
      </tr>
      <tr>
            <th 
>1-2節</th>
            <td>數學</td>
            <td>語文</td>
            <td>化學</td>
            <td>英語</td>
             <td>英語</td>
      </tr>

      <tr>
            <th>3-4節</th>
            <td>英語</td> 

            <td>物理</td>
            <td>化學</td>
            <td>英語</td>
             <td>體育</td>
      </tr>

      <tr>
            <th>5-6節</th>
            <td>數學</td>
            <td>物理</td>
            <td>體育</td>
            <td>化學</td>
            <td>美術</td>
      </tr>

      <tr>
            <th>7-8節</th>
            <td>數學</td>
            <td>美術</td>
            <td>化學</td>
            <td>英語</td>
            <td>體育</td>
      </tr>
      <tr>
            <th>9-10節</th>
            <td>生物</td>
            <td>美術</td>
            <td>生物</td>
            <td>英語</td>
            <td>物理</td>
      </tr>
    </table>
  </center>
  </body>
</html>

table.css

table,td,th{
    border:1px solid #aaa;
    font-size: 23px;

}

2.邊框合併：boder-collapse
屬性值：
separate;（分開，預設）
collapse;（合併）

table.css

table,td,th{
    border:1px solid #aaa;
    font-size: 23px;
    border-collapse:collapse;
}

3.邊框間距border-spacing(前提是：border-collapse:separate;)

table.css

table,td,th{
    border:1px solid #aaa;
    font-size: 23px;
    border-collapse:separate;
    border-spacing: 45px;
}

4.設定表格標題的位置caption-side
屬性值：
top;//預設
bottom;
left;
right;

table.css

table,td,th{
    border:1px solid #aaa;
    font-size: 23px;
    border-collapse:separate;
    border-spacing: 45px;
    caption-side:bottom;
}

5.當單元格物件寬度超過單元格所定義的寬度時，可用table-layout：fixed保持表格寬度不被改變
屬性值：auto(預設)
fixed(寬度固定)
table.css

table,td,th{
    border:1px solid #aaa;
    font-size: 23px;
    border-collapse:separate;
    border-spacing: 5px;
    table-layout: fixed;
    caption-side:top;

}

19:30 2018/8/17/週五

08：CSS設定表格樣式

1.一個簡單的表格 table.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>表格樣式</title> &

07：CSS設定列表樣式

1.有序列表(ol)和無序列表（ul） list.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>列表樣式</title&

CSS設定表格樣式，樣式表格

table{ border-collapse: collapse; //相鄰邊被合併 &nbs

QTableWidget去除表格虛線框，設定表格樣式等操作

QTableWidget去除表格虛線框: class NoFocusDelegate : public QStyledItemDelegate { Q_OBJECT public: NoFocusDelegate(){}; ~NoFocusDelegate(){}; void NoF

補充：CSS選擇器樣式的規範！

css----頁面樣式，美化頁面 css樣式的三個規則 1內聯式：直接寫在html標籤中 <p style="color:red"> 直接對html標籤使用 style屬性語法：style=“樣式：值樣式：值” 優點：操控精準缺點：不靈活，程式碼 2嵌入式：在<sty

CSS 設定字型樣式為自己下載的個性字型

一般情況下設定字型樣式“font-family”都是電腦自帶的字型，如果想要用一些個性字型就要從網上下載使用了：下載字型地址：http://font.chinaz.com/zhongwenziti_2.html （有很多這樣的網站，在此我就找了一個）選擇自己喜歡的樣式，

css設定字型樣式

font-family: 字型型別 (隸屬,宋體,新羅馬,…) 該字型型別設定依賴於當前作業系統中已安裝的字型庫, 如果所設定的字型型別在系統中能查到, 則啟用該字型如果所設定的字型型別在系統中找不到, 則使用預設字型字型型別

CSS設定表格TD TH邊框問題

GridView的單元格的邊框老是設不出來不知道是預設還是被別的樣式表給設定了對樣式表的層疊使用又不太瞭解。有時設的樣式錶針對了全域性。於是乎嘗試到這樣的使用可以針對某一個DIV裡的TD,TH元素設定樣式,注意CLSS的值。 <style type="text

前端學習記錄（九）：百分比設定頁面樣式

隨著技術的發展，各種服務端越來越多，包括各種瀏覽器，以及移動端的瀏覽器，因此對於前端技術的相容，也越來越值得前端開發人員思考，由此，百分比佈局成為前端開發的潮流。所謂的百分比佈局，即對於元素的寬高度的屬性不再採用定值定義，而是採用百分比值達到響應式適應

根據json資料來,動態的設定表格樣式,(列印格式)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>列印格式</title> <style type="t

CSS設定文字樣式——模擬Google

文字樣式，顧名思義，就是通過各種CSS去調整文字的樣式，從而創造出各式各樣的文字效果。在看完這部分的視訊後，一個很明顯的感覺：這好像是網頁版的word一樣。我們平時在Word中調整文字樣式，現在是在

CSS 設定表格格式

在word中，表格是一項很常用的功能，並且表格的樣式變化多端，使用者可以根據需要選擇自己喜歡的樣式。那麼，各式各樣的表格到底是怎麼實現的呢？本節，通過一個簡單的表格，來揭開word表格的神祕面紗。表格的HTML程式碼如下：<table><caption>

css控制表格樣式滑鼠經過變色效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>

CSS設定表格細邊框

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表格簡單操作</title> <style type="text/css">

筆記：JS設定CSS樣式的幾種方式

用JS來動態設定CSS樣式，常見的有以下幾種 1. 直接設定style的屬性某些情況用這個設定 !important值無效如果屬性有'-'號，就寫成駝峰的形式（如textAlign）如果想保留 - 號，就中括號的形式 elem

css設定細線樣式的表格

CSS設定html table表格邊框樣式

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

第3天：CSS浮動、定位、表格、表單總結

特性 input 器）用戶 style line ie瀏覽器練習 doctype 今天學的是浮動、定位、表格、表單等內容，這些是CSS中最容易混淆的知識，有許多小技巧在寫代碼過程中需要註意。下面是主要知識點：一、float浮動1、塊元素在一行顯示2、內聯元素支持寬高3

9、CSS 表格樣式

vertica 表格樣式 bsp right nbsp 表格距離 blue back 表格邊框如需在 CSS 中設置表格邊框，請使用 border 屬性。下面的例子為 table、th 以及 td 設置了藍色邊框： table, th, td { borde

Java學習總結（二十四）——前端：CSS樣式設計（CSS引入，選擇器，盒子模型，浮動元素）

引入 itl AI dropdown 正常的 type ID 總結網頁一．CSS引入方式1.CSS簡介：（1）CSS(Cascading style Sheets):層疊樣式表。用來給html網頁設置樣式;（2）當多個選擇器對同一個元素進行樣式設計時，則該元素的樣式為多

08：CSS設定表格樣式

相關推薦