2. 程式人生 > >1024，我的節日（HTML_Table巢狀）

1024，我的節日（HTML_Table巢狀）

阿新 • • 發佈：2018-12-17

作為一枚程式設計師，當然要認真對待自己的節日^_^

今天用Table巢狀做兩個小案例，Mark一下！

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="5">
    <tr>
        <td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
        <td bgcolor="#66FF00" align="center" valign="middle" colspan="2">☆☆☆</td>
    </tr>
    <tr>
        <td align="center" valign="middle">
            <table border="4">
                <tr>
                    <td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
                    <td align="center" valign="middle" colspan="2">☆☆☆</td>
                </tr>
                <tr>
                    <td align="center" valign="middle">
                        <table border="3">
                            <tr>
                                <td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
                                <td align="center" valign="middle" colspan="2">☆☆☆</td>
                            </tr>
                            <tr>
                                <td align="center" valign="middle">
                                    <table border="2">
                                        <tr>
                                            <td bgcolor="#66FF99" align="center" valign="middle" rowspan="2">
                                                ☆<br/>☆<br/>☆
                                            </td>
                                            <td align="center" valign="middle" colspan="2">☆☆☆</td>
                                        </tr>
                                        <tr>
                                            <td align="center" valign="middle">
                                                <table border="1">
                                                    <tr>
                                                        <td align="center" valign="middle" rowspan="2">
                                                            <a href="http://www.itheima.com/" target="_blank">★<br/></a>
                                                            <a href="http://www.itheima.com/" target="_blank">★<br/></a>
                                                            <a href="http://www.itheima.com/" target="_blank">★<br/></a>
                                                        </td>
                                                        <td align="center" valign="middle" colspan="2">
                                                            <a href="http://www.itheima.com/" target="_blank">★★★</a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <!--<td align="center" valign="middle">★★★</td>-->
                                                        <td align="center" valign="middle"><a
                                                                href="http://www.itheima.com/" target="_blank">
                                                            <img src="../img/1024.png" width="50" height="25">
                                                        </a>
                                                        </td>
                                                        <td align="center" valign="middle" rowspan="2">
                                                            <a href="http://www.itheima.com/" target="_blank">★<br/></a>
                                                            <a href="http://www.itheima.com/" target="_blank">★<br/></a>
                                                            <a href="http://www.itheima.com/" target="_blank">★<br/></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td align="center" valign="middle" colspan="2">
                                                            <a href="http://www.itheima.com/" target="_blank">★★★</a>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
                                        </tr>
                                        </tr>
                                        <tr>
                                            <td align="center" valign="middle" colspan="2">☆☆☆</td>
                                        </tr>
                                    </table>
                                </td>
                                <td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
                            </tr>
                            </tr>
                            <tr>
                                <td bgcolor="#66FF66" align="center" valign="middle" colspan="2">☆☆☆</td>
                            </tr>
                        </table>
                    </td>
                    <td bgcolor="#66FF33" align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
                </tr>
                </tr>
                <tr>
                    <td align="center" valign="middle" colspan="2">☆☆☆</td>
                </tr>
            </table>
        </td>
        <td align="center" valign="middle" rowspan="2">☆<br/>☆<br/>☆</td>
    </tr>
    </tr>
    <tr>
        <td align="center" valign="middle" colspan="2">☆☆☆</td>
    </tr>
</table>


</body>
</html>

案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table_span</title>
</head>
<body>

<table border="1">
    <tr aria-rowspan="2">
        <td bgcolor="#adff2f">AAA</td>
        <td>BBB</td>
        <td bgcolor="#adff2f">CCC</td>
    </tr>
    <tr>
        <td>AAA</td>
        <td>
            <table border="1">
                <tr aria-rowspan="2">
                    <td bgcolor="#adff2f">AAA</td>
                    <td>BBB</td>
                    <td bgcolor="#adff2f">CCC</td>
                </tr>
                <tr>
                    <td>AAA</td>
                    <td>
                        <table border="1">
                            <tr aria-rowspan="2">
                                <td bgcolor="#adff2f">AAA</td>
                                <td>BBB</td>
                                <td bgcolor="#adff2f">CCC</td>
                            </tr>
                            <tr>
                                <td>AAA</td>
                                <td>
                                    <table border="1">
                                        <tr aria-rowspan="2">
                                            <td bgcolor="#adff2f">AAA</td>
                                            <td>BBB</td>
                                            <td bgcolor="#adff2f">CCC</td>
                                        </tr>
                                        <tr>
                                            <td>AAA</td>
                                            <td>
                                                <table border="1">
                                                    <tr aria-rowspan="2">
                                                        <td bgcolor="#adff2f">AAA</td>
                                                        <td>BBB</td>
                                                        <td bgcolor="#adff2f">CCC</td>
                                                    </tr>
                                                    <tr>
                                                        <td>AAA</td>
                                                        <td bgcolor="#adff2f"><font color="red"><b>1024</b></font></td>
                                                        <td>CCC</td>
                                                    </tr>
                                                    <tr>
                                                        <td bgcolor="#adff2f">AAA</td>
                                                        <td>BBB</td>
                                                        <td bgcolor="#adff2f">CCC</td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td>CCC</td>
                                        </tr>
                                        <tr>
                                            <td bgcolor="#adff2f">AAA</td>
                                            <td>BBB</td>
                                            <td bgcolor="#adff2f">CCC</td>
                                        </tr>
                                    </table>
                                </td>
                                <td>CCC</td>
                            </tr>
                            <tr>
                                <td bgcolor="#adff2f">AAA</td>
                                <td>BBB</td>
                                <td bgcolor="#adff2f">CCC</td>
                            </tr>
                        </table>
                    </td>
                    <td>CCC</td>
                </tr>
                <tr>
                    <td bgcolor="#adff2f">AAA</td>
                    <td>BBB</td>
                    <td bgcolor="#adff2f">CCC</td>
                </tr>
            </table>
        </td>
        <td>CCC</td>
    </tr>
    <tr>
        <td bgcolor="#adff2f">AAA</td>
        <td>BBB</td>
        <td bgcolor="#adff2f">CCC</td>
    </tr>
</table>

</body>
</html>

相關推薦

1024，我的節日（HTML_Table巢狀）

作為一枚程式設計師，當然要認真對待自己的節日^_^ 今天用Table巢狀做兩個小案例，Mark一下！ 案例一： <!DOCTYPE html> <html lang="en"> <head> <meta charse

向標準輸出上列印一些用ASCII字元組成的圖形（彙總）（迴圈巢狀）（關鍵是找要輸出物與行數n之間的關係，找規律）

1 #include <stdio.h> int main() { int i,j,n; scanf("%d",&n);//有n行 for(i=1;i<=n;i++) {for(j=1;j<=2*

TabLayout + ViewPager輪播圖 （雙層巢狀）,側拉展示條目（頭像加listview，點選頭像可切換）PullToRefreshListView重新整理載入

模組簡介： 1.底部：TabLayout + ViewPager輪播圖 2.主頁面可測拉 展示頭像，可選擇系統相簿，切換圖片（二級取樣） 3.TabLayout + ViewPager巢狀TabLayout + ViewPager以展示 正在上映 和 *

【矩陣快速冪】HDU 4549 : M斐波那契數列（矩陣巢狀）

【題目大意】 M斐波那契數列F[n]是一種整數數列，它的定義如下： F[0] = a F[1] = b F[n] = F[n-1] * F[n-2] ( n > 1 ) 現在給出a,

Python列印list中的所有元素（list巢狀）

#!/usr/bin/python # _*_ coding: UTF-8 _*_ t=[1,2,3,[3,4,5,[5,4,3],5],1,2,[4,5],7,4,[6,34]] def func(L): for i in L:

jquery實現樓層巢狀（DIV巢狀）

經常看到評論區回覆樓層巢狀，也就是蓋樓，下面來用jquery來實現div佈局 程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

UpdatePanel的簡單用法（非巢狀）

ScriptManager和UpdatePanel控制元件聯合使用可以實現頁面區域性非同步重新整理的效果。UpdatePanel用來設定頁面中區域性非同步重新整理的區域，它必須依賴於ScriptManager，因為ScriptManager控制元件提供了客戶端指

zk 資料繫結例項（grid巢狀）

忙了一天終於把這個問題搞定了，雖然有點累，不過心裡很興奮，呵呵！ 進入正題！ 問題： grid裡巢狀grid。 解決方式： 利用zk的資料繫結方式對grid資料進行賦值。 第一步:首先建立外層grid頁面。程式碼如下： <?page title="devices"

今天總結一下我對Fragment的理解（碎片的入棧與出棧，碎片的巢狀）

1.碎片的巢狀！ getFragmentManager到的是activity對所包含fragment的Manager，而如果是fragment巢狀fragment，那麼就需要利用getChildFragmentManager()了。 getFragmentManager(

用C程式設計，設定兩個外部中斷（INT0和INT1）按鍵，優先順序IP=0x04，即把外部中斷1設定為高階優先順序，外部中斷0為低階優先順序，使外部中斷1巢狀在外部中斷0中。

問題 用C程式設計，設定兩個外部中斷（INT0和INT1）按鍵，優先順序IP=0x04，即把外部中斷1設定為高階優先順序，外部中斷0為低階優先順序，使外部中斷1巢狀在外部中斷0中。 要求：中斷觸發方式為下降沿觸發，按鍵有消抖功能 模擬 程式碼 #include <

Excel中IF函式的多條件判斷（巢狀），與LOOKUP函式的聯合應用

1、IF函式的多條件判斷 當IF函式要對多個條件進行判斷時，除了AND和OR函式（前面文章介紹），更多的情況需要用到IF函式的巢狀。 例如要對學生的分數進行評級，當分數小於60分時，不及格；分數大於等於60分小於70分時為及格，以此類推。 選擇單元格—輸入公式=IF(B2 2、LOOKUP函式基礎應用

豬豬的IT之路---Java成長之路day04（do...while,for,迴圈使用關鍵字，迴圈巢狀）

迴圈： While(迴圈條件){ 迴圈體； } 迴圈條件為true時迴圈或重複執行迴圈體，直到迴圈條件為false迴圈結束 注意： 1.迴圈開始條件一般要定義在迴圈結構前面 2.迴圈操作（迴圈體）中一般都應該存在步進操作（++或–） do…while迴圈語句 do…while迴圈語句和whi

java 泛型詳解（普通泛型、 萬用字元、 泛型介面，泛型陣列，泛型方法，泛型巢狀）

JDK1.5 令我們期待很久,可是當他釋出的時候卻更換版本號為5.0。這說明Java已經有大幅度的變化。本文將講解JDK5.0支援的新功能-----Java的泛型. 1、Java泛型  其實Java

ScrollView+Fragment+ListView巢狀ListView，麻麻再也不用擔心我不會寫巢狀

前言 之前寫了一篇文章 android ListView/GridView與ScrollView巢狀的滑動衝突解決 介紹瞭如何解決ScrollView與AdapterView的巢狀，但是沒有給出demo，那是因為那些程式碼比較多，而且是在手頭的專案裡，業

hive 學習系列五（hive 和elasticsearch 的交互，很詳細哦，我又來吹liubi了）

圖片 upload ima com 5.6 cat rds href ping hive 操作elasticsearch 一，從hive 表格向elasticsearch 導入數據 1，首先，創建elasticsearch 索引，索引如下 curl -XPUT ‘10.81

數學建模競賽經驗分享（從本科生到研究生，獲獎成功率100%，我從數模所學）

前言 博主本科是數學專業，研究生讀的是計算機專業，其中參加了本科生的全國大學生數學建模競賽和研究生數學建模競賽共三次。本科參加一次（2014年）取得了大學生數學建模競賽國家二等獎（國家獎只有一、二等獎）；研究生參加兩次：2017年得到了國家三等獎（研究生國家獎有一、二、三等），2018年今天

父子路由（路由的巢狀）

在VueRouter的例項中的routes裡的物件中，除了path，component還有一個children屬性，可以在其中來設定子路由的指向與跳轉等 注意：因為已經是在其中指明，所以子路由中的path不需要加字首 '/' <template id="home"&

今年下半年，中日合拍的《Git遊記》即將正式開機，我將...（上集）

一回首，2018年就剩下10天啦，看到很多巨佬都在發技術總結的文章，反觀自己這隻鶸(ruò)， 技術沒啥長進，摸魚摸了一年，慚愧。琢磨著硬擼也要擼一篇總結的文章，不然有種2018白過的感覺。 至於選Git的理由： 看到掘金的童鞋發了好幾條小冊的票圈，想想自己第一本入的小冊是凱哥的：Git 原理詳解

開發過程中RecyclerView遇到的坑（包括巢狀使用時）

1.使用recyclerView時，遇到了一個問題，裡面的內容怎麼也顯示不出來，試了一下將recyclerView的高度固定就能顯示了，經過在網上查詢，發現是使用wrap_content屬性不起作用，這個是recyclerView自帶的一個坑。 解決方法：提升一下recyc

csdn coder 楊凱（吃的苦中苦，方為人上人!我是程式猿，我喂自己袋鹽！）

征服資料庫之mysql mysql概述：MySQL是一個關係型資料庫管理系統，由瑞典MySQL AB公司開發，目前屬於Oracle公司。本專欄是博主長期以來使用mysql所記錄下的點點滴滴，其中包括各種複合查詢的sql語句以及事務