js动态表格

table,
    tr,
    td,
    caption {
      border: 1px solid white;
      border-collapse: collapse;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      text-align: center;
    }
    td {
      min-width: 100px;
    }
    table>caption{
        background-color: #B4B4B4;
    }
    table>tbody>tr:nth-of-type(even){
        background-color: #B4B4B4;
    }
    table>tbody>tr:nth-of-type(odd){
        background-color: #DCDCDC;
    }

var data = {
        title: "四大美女",

        header: ["name", "age", "sex", "description"],

        users: [
          {
            name: "西施",

            age: 18,

            sex: "female",

            dec: "沉鱼"
          },

          {
            name: "昭君",

            age: 18,

            sex: "female",

            dec: "落雁"
          },

          {
            name: "貂蝉",

            age: 18,

            sex: "female",

            dec: "闭月"
          },

          {
            name: "杨玉环",

            age: 18,

            sex: "female",

            dec: "羞花"
          }
        ]
      };

      document.write("<table>");
      document.write("<caption>" + data.title + "</caption>");
      document.write("<tr>");
      for (x in data.header) {
        document.write("<td>" + data.header[x] + "</td>");
      }
      document.write("</tr>");
      
      for(y in data.users){
        document.write("<tr>");
            for(z in data.users[y]){
                document.write('<td>'+data.users[y][z]+'</td>');
            }
        document.write("</tr>");
      }
      
      document.write("</table>");