HTML table not working

Tags: html css
Question!

I am attempting to program a website when the table function stopped working. The rest of the page loads but there is no table.

body {} .backgroundimage {
  position: fixed;
  z-index: 1;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
}
.button1 {
  z-index: 1;
  text-align: center;
  height: 5%;
  position: fixed;
  width: 50%;
}
.button2 {
  margin-left: 50%;
  width: 50%;
  height: 5%;
  z-index: 1;
  text-align: center;
  position: fixed;
}
.menu {
  z-index: 3;
  border: 1px solid black;
  width: 100%;
  background-color: white;
}
.titlebanner {
  display: block;
  margin: 0 auto;
  z-index: 2;
  background-color: transparent;
  max-width: 25%;
}
.titlesection {
  z-index: 2;
  height: 20%;
  top: -100%;
  background-color: blue;
  position: relative;
  text-align: left;
}
<html>

<head>
  <title>
    Adina White Photography
  </title>
  <link rel="stylesheet" type="text/css" href="Assets\CodeFiles\CssFile.css" />
  <link rel=" icon" href="Assets\Pictures\TabIcon.png" />
</head>

<body>
  <div class="titlesection">
    <img class="titlebanner" src="Assets\Pictures\BannerIcon.png" alt="Uh-Oh,     This image was too dank to load." />
  </div>
  <table style="width:100%; z-index:1;">
    <tr>
      <!--the error is here somewhere-->
      <th>content</th>
      <th>content</th>
      <th>content</th>
    </tr>
  </table>
  <div style="top:-150px;height:100%;z-index:1;background-color:transparent;position:relative;text-align:left;">
    <img class="backgroundimage" src="Assets\Pictures\winterscene.jpg" alt="Uh-Oh, This image was too dank to load." />
  </div>
</body>

</html>



Answers

The table is there, but you cannot see it because it is invisible since there are no borders or rows, only headers. Once you add that, you can see it, as demonstrated here:

<table style="width:100%; z-index:1;" border=1> 
<tr>
 <th>content</th> <th>content</th>  <th>content</th> 
</tr>
 <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td> 
 </tr> 
</table>


Is it necessary to be trying to use these modules as custom elements? Could you not use the compose element to include each one?

eg

<template>
    <compose view-model="childAView" view="./child-a-view"></compose>
    <compose view-model="childBView" view="./child-b-view"></compose>
<template>


You can get first character, insert it with a different font color and then add rest of the content:

var span = $('.design span');
var html = span.html();

span.html("<span style='color:red;'>"+ html.charAt(0)  +"</span>" + html.substring(1,html.length));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="design">DESIGNED BY <span>Teodor Victor</span></span>

By : Marcin C.


This video can help you solving your question :)
By: admin