1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Hi, somebody know hot to create this kind of list? thanks...

Discussion in 'HTML & Website Design' started by jose455, Sep 30, 2017.

0
  1. #1
    Hello guys can somebody help how to create this kind of list using css and html? thank you so much...
     

    Attached Files:

    jose455, Sep 30, 2017 IP
  2. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #2
    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>&#175;&#175;<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
     
    denis bayly, Oct 1, 2017 IP
  3. SoftLink

    SoftLink Active Member

    Messages:
    103
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #3
    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):
     
    SoftLink, Oct 4, 2017 IP
    Blesta.Store likes this.
  4. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #4

    Why would you not use the "table element" to display tabular data? :confused:

    Do you harbour some personal aversion to it. :rolleyes:
    ​


    coothead
     
    denis bayly, Oct 4, 2017 IP
    kk5st likes this.
  5. SoftLink

    SoftLink Active Member

    Messages:
    103
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #5
    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.
     
    SoftLink, Oct 4, 2017 IP
  6. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #6

    That is absolute nonsense. :rolleyes:

    The semantic element to display tabular data is the "table element".

    That, also, is absolute nonsense. :rolleyes:

    ​

    coothead
     
    denis bayly, Oct 4, 2017 IP
    kk5st likes this.
  7. Arun Kumar Soni

    Arun Kumar Soni Well-Known Member

    Messages:
    271
    Likes Received:
    16
    Best Answers:
    2
    Trophy Points:
    115
    #7
    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.
     
    Arun Kumar Soni, Oct 4, 2017 IP
  8. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #8

    That is absolute nonsense.. :rolleyes:
    Further reading:-


    ​

    coothead
     
    denis bayly, Oct 5, 2017 IP
    kk5st likes this.