Hello guys can somebody help how to create this kind of list using css and html? thank you so much...
Hi there jose455, and a warm welcome to these forums. Does this help... <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>Price List</title> <link rel="stylesheet" href="screen.css" media="screen"> <style media="screen"> body { background-color: #f0f0f0; font: 1em/150% verdana, arial, helvetica, sans-serif; } h1 { font-size: 1.5em; color: #565656; text-transform: uppercase; text-align: center; } table { width: 100%; max-width: 35em; margin: auto; background-color: #000; box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 ); color: #fff; } caption { padding: 1.5em 0; background-color: #000; box-shadow: 0.2em 0.2em 0.2em rgba( 0, 0, 0, 0.3 ); font-size: 2em; } tbody td { padding: 0.5em 0; text-transform: uppercase; } tbody td:nth-child(odd) { text-indent: 2em; } tfoot td { padding: 2.5em 0 5em; font-size: 0.8em; text-transform: uppercase; text-align: center; } </style> </head> <body> <h1>our price list</h1> <table> <caption>¯¯<br>Winter Specials</caption> <tbody> <tr> <td>manicure</td> <td>$18</td> </tr><tr> <td>hair styling</td> <td>$25</td> </tr><tr> <td>haircut</td> <td>$35</td> </tr><tr> <td>highlights</td> <td>$40</td> </tr><tr> <td>permanent lashes</td> <td>$16</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">book now ></td> </tr> </tfoot> </table> </body> </html> Code (markup): coothead
Wow denis-bayly that's pretty eloborate; very kind of you. I wouldn't use tables though. SOON you'll be able to use the new css grid model. I wouldn't recommend it quite yet. The Flexbox model should work except for antiquated browsers. <style> .div-column { display: -webkit-flex; display:flex; flex-direction:column; } .div-row { display: -webkit-flex; display: flex; flex-direction:row; width:30vw; /* the width of both columns combined */ } .div-cell-left { width:75%; /*75% of .div-row's width */ } .div-cell-right { width:25%; /*25% of .div-row's width */ } </style> <body> <div class="div-row"> <div class="div-cell-left">Manicure</div> <div class="div-cell-right">$18.00</div> </div> <div class="div-row"> <div class="div-cell-left">Hair Styling</div> <div class="div-cell-right">$25.00</div> </div> <div class="div-row"> <div class="div-cell-left">Hair Cut</div> <div class="div-cell-right">$35.00</div> </div> </body> Code (markup):
Why would you not use the "table element" to display tabular data? Do you harbour some personal aversion to it. coothead
It's just old & clunky. It's not extremely dependable concerning format. Also, it's discouraged by W3C except for grids. I think once 'grids' become 'real', tables will largely be obsolete. It's a shame really. It's a simple layout and if css implemented them properly it would have sufficed for a lot of current challenges like responsiveness. I used it for *years* due to the lack of performance in divs and still do on occasion. I think grid may be the way to go now but the browsers have to catch up.
That is absolute nonsense. The semantic element to display tabular data is the "table element". That, also, is absolute nonsense. coothead
Table is outdated, but Div is better. So, use Div, in my opinion because I done PHP training there I learn that div is better as compare to the table.