【筆記】在HTML中使用ul、li來實現表格呈現

在網頁上以表格來呈現資料，初學者如我，都會使用table來實現，但使用table有一些較不便的地方，如比較難維護，載入時間較久等問題，後來才發現使用div、ul、li、dt、dl、dd等，才是進階(相對於我)的用法。

在本範例中，使用ul、li來做一個例子。

在body中放入下列程式碼：

        

                Microsoft helped develop technology that, based on GPS data, accurately predicts one's location up to multiple years beforehand.
        
        

        Target predicts customer pregnancy from shopping behavior, thus identifying prospects to contact with offers related to the needs of a newborn's parents.
        
        

Tesco (UK) annually issues 100 million personalized coupons at grocery cash registers across 13 countries. Predictive analytics increased redemption rates by a factor of 3.6.
        
        

Netflix sponsored a $1 million competition to predict which movies you will like in order to improve movie recommendations.
        
        

One top-five U.S. health insurance company predicts the likelihood an elderly insurance policy holder will die within 18 months in order to trigger end-of-life counseling.
        
        

Con Edison predicts energy distribution cable failure, updating risk levels that are displayed on operators' screens three times an hour in New York City.
        

然後在head中放入CSS如下：

ul.table{
        width:660px;
}
ul.table > li{
        width:200px;
        height:120px;
        color:#fff;
        background-color:#001aea;
        list-style-type:none;
        float:left;
        padding:10px;
        margin:2px;
}

效果就會像下面一樣：

• Microsoft helped develop technology that, based on GPS data, accurately predicts one's location up to multiple years beforehand.
• Target predicts customer pregnancy from shopping behavior, thus identifying prospects to contact with offers related to the needs of a newborn's parents.
• Tesco (UK) annually issues 100 million personalized coupons at grocery cash registers across 13 countries. Predictive analytics increased redemption rates by a factor of 3.6.
• Netflix sponsored a $1 million competition to predict which movies you will like in order to improve movie recommendations.
• One top-five U.S. health insurance company predicts the likelihood an elderly insurance policy holder will die within 18 months in order to trigger end-of-life counseling.
• Con Edison predicts energy distribution cable failure, updating risk levels that are displayed on operators' screens three times an hour in New York City.