如何在HTML 上做表格再用CSS 美化它. 今天我們來 ... - Medium

如何在HTML 上做表格再用CSS 美化它. 今天我們來說一說怎麼作表格，我就先說一個最簡單的結構，請看下方被包覆在

內的 的標題內容還會自行置中喔。

若我們現在加上CSS美化一下它呢？請看一下美化過後的codepen。

我加了下面這些CSS.center{width:680px;border:1pxsolidblack;height:600px;float:left;margin:10px;background:grey;padding:15px;←多加了這一個}--------------------------下面都是新的table{border:1pxsolidwhite;}tableth{border:1pxsolidwhite;padding:5px;color:gold;}tabletd{border:1pxsolidwhite;padding:5px;color:white;}首先我先在.center區塊新增了{padding:15px},讓.center產生15px的內距，表格會自動往中間靠攏，再來就是在table,tableth,tabletd都下了{border:1pxsolidwhite;}，tableth和tabletd我再下了{padding:5px;}，然後用color分別更改一下文字的顏色，就變成這個樣子了。

很簡單，不複雜，當然表格不只是這樣，這邊只是講個最基本的，其他的以後我們有機會再聊，下次見。

--MorefromAlecWangFollowLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedAlecWang26FollowersFollowMorefromMediumVictorTuritzinRubyActiveRecordMigrations:DatabaseControlMahinArafathWebDevStreaksDay-33(Milestone5:IntegrateJavascript)NickWeinberginflatiron-blogJavaScriptisWeird:PrimitiveTypes,Objects,andObjectPropertiesBorkedPop!_OSUpgradeIssuesHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable

	的標籤， ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePhotobyPauliusDragunasonUnsplash如何在HTML上做表格再用CSS美化它今天我們來說一說怎麼作表格，我就先說一個最簡單的結構，請看下方被包覆在內的這是橫列的意思，有幾個就表示這個表格有幾個橫列，以這個例子來說我們有兩個橫列，然後分別一個放另一個放，這樣就是完成了一個簡單的比格。 若我們再擴充如下呢？ 的標籤，最簡單的表格就是由這樣組成的。 表格標題 表格內容 要在HTML裡添加表格，首先先放一個標籤，然後把其他關於表格的標籤都放在他們裡面，你先看到的是有幾個 表格標題 表格內容 Mac iPad iPhone Watch TV Music MacBookAir iPadPro iPhone11Pro AppleWatchSeries5 AppleTVApp AppleMusic MacBookPro iPadAir iPhone11 AppleWatchNike AppleTV+ itunes iMac iPad iPhoneXR AppleWatchHermes AppleTV4K HomePod iMacPro iPadmini iPhone8 AppleWatchEdition AppleTVHD AirPods MacPro ApplePencil AirPods AppleWatchSeries3 AirPlay ipodtouch Macmini 聰穎鍵盤 iOS13 錶帶 配件 Music配件 我們來看看在codepen裡長什麼樣子是不是發現它都沒有線條，其實是有的，只是隱形的你看不見，表格內容像有遵循著一個隱形的線排列著，而且