I've seen a similar topic, but not for my specific situation. I need to nest a table within the table and it will take up several cells, but when I try to nest a table it deletes the surrounding table at the same time. I included a picture of how it should look after my code and my code is how it looks currently. Can someone explain how this is done? Much appreciated.
/*
CSS for Lounge Project
Filename: styles.css
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/
/*Reset Styles*/
html, body{
font-size: 14px;
width: 100%;
}
a, body, footer, header, h1, h2, h3, img, li, nav, p, ul, table, tbody, td, tfoot, th, thead, tr{
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
/*Drink font colors*/
h2.green {
color: green;
}
h2.blue {
color: blue;
}
h2.purple {
color: purple;
}
h2.red {
color: red;
}
h2.yellow {
color: gold;
}
/*center and border image*/
img.smlounge {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: red;
}
/*Table styles*/
td, th {
border: 1px solid black;
font-size: 1.3em;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0 1em ;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
td[colspan="2"] {
width: 20%;
}
.drink-name {
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Head First Lounge Elixirs</title>
<!--
Elixir page for Lounge Project
Filename: elixir.html
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
-->
<link type="text/css" rel="stylesheet" href="../lounge.css" />
</head>
<body>
<h1>Our Elixirs</h1>
<h2 class="green">Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
</p>
<hr/>
<h2 class="blue">Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
</p>
<hr/>
<h2 class="purple">Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
</p>
<hr/>
<h2 class="red">Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
</p>
<hr/>
<h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
<p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
and all night.
</p>
<hr/>
<br/>
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td>Iced</td>
<td>16 oz.</td>
<td>$3.75</td>
</tr>
<tr>
<td>Frozen</td>
<td>20 oz.</td>
<td>$4.75</td>
</tr>
</tbody>
</table>
<p>Back to the Lounge</p>
<footer>
©2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
</footer>
</body>
</html>
How the table should look
You can do something like below and change the CSS as per your need.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Head First Lounge Elixirs</title>
<!--
Elixir page for Lounge Project
Filename: elixir.html
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
-->
<link type="text/css" rel="stylesheet" href="../lounge.css" />
</head>
<body>
<h1>Our Elixirs</h1>
<h2 class="green">Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
</p>
<hr/>
<h2 class="blue">Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
</p>
<hr/>
<h2 class="purple">Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
</p>
<hr/>
<h2 class="red">Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
</p>
<hr/>
<h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
<p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
and all night.
</p>
<hr/>
<br/>
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td colspan="2">
<table>
<tr>
<td>Iced</td>
<td>16 oz.</td>
</tr>
<tr>
<td>Frozen</td>
<td>20 oz.</td>
</tr>
</table>
</td>
<td colspan="2">
<table>
<tr>
<td>$3.75</td>
</tr>
<tr>
<td>$4.75</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<p>Back to the Lounge</p>
<footer>
©2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
</footer>
</body>
</html>
Hope this helps!
Nested like this
/*
CSS for Lounge Project
Filename: styles.css
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/
/*Reset Styles*/
html,
body {
font-size: 14px;
width: 100%;
}
a,
body,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
p,
ul,
table,
tbody,
td,
tfoot,
th,
thead,
tr {
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
/*Drink font colors*/
h2.green {
color: green;
}
h2.blue {
color: blue;
}
h2.purple {
color: purple;
}
h2.red {
color: red;
}
h2.yellow {
color: gold;
}
/*center and border image*/
img.smlounge {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: red;
}
/*Table styles*/
td,
th {
border: 1px solid black;
font-size: 1.3em;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0 1em;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
td[colspan="2"] {
width: 20%;
}
.drink-name {
text-align: left;
}
.mintable {
border-collapse: initial;
font-size: 0.9em;
}
tbody {
border: solid black 1px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Head First Lounge Elixirs</title>
<!--
Elixir page for Lounge Project
Filename: elixir.html
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
-->
<link type="text/css" rel="stylesheet" href="../lounge.css" />
</head>
<body>
<h1>Our Elixirs</h1>
<h2 class="green">Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
</p>
<hr/>
<h2 class="blue">Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
</p>
<hr/>
<h2 class="purple">Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
</p>
<hr/>
<h2 class="red">Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
</p>
<hr/>
<h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
<p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
and all night.
</p>
<hr/>
<br/>
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td rowspan="2" colspan="2">
<table class="mintable">
<tr>
<td>Iced</td>
<td>16 oz.</td>
</tr>
<tr>
<td>Frozen</td>
<td>20 oz.</td>
</tr>
</table>
</td>
<td>
<table class="mintable">
<tr rowspan="2" colspan="2">
<td>$4.75</td>
</tr>
<tr>
<td>$3.75</td>
</tr>
</table>
</td>
</tr>
<td></td>
</tbody>
</table>
<br>
<p>Back to the Lounge</p>
<footer>
©2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
</footer>
</body>
</html>
Do it like this (of course you'll need to fix the font size and styling, and do the other side too. Ok try this. you still need to fix the font sizing
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td colspan="2" rowspan="2" class="nested">
<table>
<tbody>
<tr><td>Iced</td><td>16 oz</td></tr>
<tr><td>Frozen</td><td>20 oz</td></tr>
</tbody>
</table>
</td>
<td>$3.75</td>
</tr>
<tr>
<td>$4.75</td>
</tr>
</tbody>
/*
CSS for Lounge Project
Filename: styles.css
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/
/*Reset Styles*/
html, body{
font-size: 14px;
width: 100%;
}
a, body, footer, header, h1, h2, h3, img, li, nav, p, ul, table, tbody, td, tfoot, th, thead, tr{
border: 0;
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
/*Drink font colors*/
h2.green {
color: green;
}
h2.blue {
color: blue;
}
h2.purple {
color: purple;
}
h2.red {
color: red;
}
h2.yellow {
color: gold;
}
/*center and border image*/
img.smlounge {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: red;
}
/*Table styles*/
td, th, td td {
border: 1px solid black;
font-size: 1.3em;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0 1em ;
}
table {
border-collapse: collapse;
margin: 0 auto;
width:100%
}
table table{
margin:1%;
width:98%;
}
table table td{
width:50%;
}
table table tr, table table tbody{
width:100%
}
.nested{padding:0;}
td[colspan="2"] {
width: 20%;
}
.drink-name {
text-align: left;
}
Related
I have one known-problem: text and images that should be below the table are in the wrong place (see screenshot)
.openingtimes {
text-align: right;
padding-top: auto;
padding-right: auto;
padding-left: auto;
padding-bottom: auto;
}
table,
tr,
td {
border: 1px solid;
text-align: center;
padding-top: auto;
padding-right: auto;
padding-left: auto;
padding-bottom: auto;
}
<div>
<table border="1" align="right">
<tbody>
<tr>
<td>Monday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Tuesday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Wednesday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Thursday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Friday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Saturday</td>
<td>0900 - 1700</td>
</tr>
</tbody>
</table>
</div>
<div class="openingtimes">
<br>
<b>All major card types accepted including contactless </b><br>
<br>
<img src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/paymentmethods.png" alt="style by julie payment methods" width="227" height="28" align="right">
<br><br>
<b>Supporting (click to find out more)</b><br><br>
<a href="https://stylebyjulie.co.uk/little-princess-trust/">
<img title="little princess trust" src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/littleprincess-logo.png" alt="little princess trust" width="138" height="111" align="right"></a>
</div>
The content should all be aligning to the right.
The text and images should be below the table in this order
Table
"all major card types accepted" text
card types img
"supporting" text
Little princess trust img
PS: I am new to HTML so if you have any feedback on my code feel free to include. Always looking to learn and improve.
The align="right" attribute on your table was breaking the layout but this has been deprecated and shouldn't be used. I've used margin-inline: auto 0 on your table instead that pushes the table to the right. Here's a good video from Kevin Powell to help you. If you're new to HTML and CSS his videos are a very good introduction.
.openingtimes {
text-align: right;
padding-top: auto;
padding-right: auto;
padding-left: auto;
padding-bottom: auto;
}
table,
tr,
td {
border: 1px solid;
text-align: center;
padding-top: auto;
padding-right: auto;
padding-left: auto;
padding-bottom: auto;
}
table {
margin-inline: auto 0; /* added this */
}
<div>
<table>
<tbody>
<tr>
<td>Monday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Tuesday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Wednesday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Thursday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Friday</td>
<td>0900 - 1800</td>
</tr>
<tr>
<td>Saturday</td>
<td>0900 - 1700</td>
</tr>
</tbody>
</table>
</div>
<div class="openingtimes">
<br>
<b>All major card types accepted including contactless </b><br>
<br>
<img src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/paymentmethods.png" alt="style by julie payment methods" width="227" height="28" align="right">
<br><br>
<b>Supporting (click to find out more)</b><br><br>
<a href="https://stylebyjulie.co.uk/little-princess-trust/">
<img title="little princess trust" src="https://stylebyjulie.co.uk/wp-content/uploads/2021/10/littleprincess-logo.png" alt="little princess trust" width="138" height="111" align="right"></a>
</div>
I am very new to Bootstrap (as in less than a week's experience), and I have run into an annoying little problem. Upon resize, the text inside one of my columns begins to sort of slide under the column below it. I have tried placing the text in it's own container and changing all containers to .container from .container-fluid, but nothing seems to work.
The website can be accessed here and the relevant code snippets are below
.table > tbody > tr > td {
vertical-align: middle;
}
h1 {
font-family: 'Great Vibes', Helvetica, sans-serif;
font-size: 50px;
color: white;
}
.table > tbody > tr:hover {
background-color: #333333;
}
<div class="col-sm-7" style="background-color: #111313; height: 600px; color: white; min-height: 500px; margin-bottom: 20px">
<h1 style="text-align: center;">Sara Manning<br/> Orchestra</h1>
<iframe class="img-responsive center-block" style="height: 60%; width: 75%" src="https://www.youtube.com/embed/rOjHhS5MtvA" frameborder="0" allowfullscreen></iframe>
<hr/>
<p style="word-wrap: break-word; margin-bottom: 40px; width: 75%; margin: auto;"> The Sara Manning Orchestra is a highly trained group of musicians from all over the world. Our orchestra consists of nearly 80 world renowned musicians. Our conductor, Sara Manning, is skilled enough to have conducted The London Symphony Orchestra when their conductor called in sick. Our musicians are really good too. We've got those guys that play those things with the strings, and some girls who play those big metal tubes you blow on.
<br/>
</p>
</div>
<div class="col-sm-5" style="background-color: black; min-height: 600px; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;">
<h2 style="text-align: center">Upcoming Tourdates</h2>
<table class="table">
<thead>
<th>Location</th>
<th>Date</th>
<th>Ticket Info</th>
</thead>
<tbody>
<tr>
<td>
The Kentucky Theatre
<p class="text-muted">Lexington, KY</p>
</td>
<td>Oct. 22</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
The Civic Auditorium
<p class="text-muted">Knoxville, TN</p>
</td>
<td>Oct. 31</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
The Sydney Opera House
<p class="text-muted">Sydney, New South Wales, Australia</p>
</td>
<td>Nov. 30</td>
<td>
<h3 class="text-danger">Sold Out</h3>
</td>
</tr>
<tr>
<td>
Bob's House of Music 'n Stuff
<p class="text-muted">An Undisclosed Basement In Queens, NY</p>
</td>
<td>Dec. 25</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
Batman's Cave
<p class="text-muted">Gotham, USA</p>
</td>
<td>Dec. 31</td>
<td>
<h3 class="text-danger">Sold Out</h3>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Remove the height: 600px; from your col-sm-7. Perhaps you want a min-height? Since you are forcing it to always be 600px high, the div below it will overlap it when the content in the col-sm-7 is more than 600px.
.table > tbody > tr > td {
vertical-align: middle;
}
h1 {
font-family: 'Great Vibes', Helvetica, sans-serif;
font-size: 50px;
color: white;
}
.table > tbody > tr:hover {
background-color: #333333;
}
<!-- remove height: 600px; -->
<div class="col-sm-7" style="background-color: #111313; color: white; min-height: 500px; margin-bottom: 20px">
<h1 style="text-align: center;">Sara Manning<br/> Orchestra</h1>
<iframe class="img-responsive center-block" style="height: 60%; width: 75%" src="https://www.youtube.com/embed/rOjHhS5MtvA" frameborder="0" allowfullscreen></iframe>
<hr/>
<p style="word-wrap: break-word; margin-bottom: 40px; width: 75%; margin: auto;"> The Sara Manning Orchestra is a highly trained group of musicians from all over the world. Our orchestra consists of nearly 80 world renowned musicians. Our conductor, Sara Manning, is skilled enough to have conducted The London Symphony Orchestra when their conductor called in sick. Our musicians are really good too. We've got those guys that play those things with the strings, and some girls who play those big metal tubes you blow on.
<br/>
</p>
</div>
<div class="col-sm-5" style="background-color: black; min-height: 600px; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;">
<h2 style="text-align: center">Upcoming Tourdates</h2>
<table class="table">
<thead>
<th>Location</th>
<th>Date</th>
<th>Ticket Info</th>
</thead>
<tbody>
<tr>
<td>
The Kentucky Theatre
<p class="text-muted">Lexington, KY</p>
</td>
<td>Oct. 22</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
The Civic Auditorium
<p class="text-muted">Knoxville, TN</p>
</td>
<td>Oct. 31</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
The Sydney Opera House
<p class="text-muted">Sydney, New South Wales, Australia</p>
</td>
<td>Nov. 30</td>
<td>
<h3 class="text-danger">Sold Out</h3>
</td>
</tr>
<tr>
<td>
Bob's House of Music 'n Stuff
<p class="text-muted">An Undisclosed Basement In Queens, NY</p>
</td>
<td>Dec. 25</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
Batman's Cave
<p class="text-muted">Gotham, USA</p>
</td>
<td>Dec. 31</td>
<td>
<h3 class="text-danger">Sold Out</h3>
</td>
</tr>
</tbody>
</table>
</div>
I have been reading the book of head first html and CSS 2nd and I found on Page627 there are unexpected vertical showed in a table. Could anyone tell me what is the problem.
Here is the html and CSS code:
#font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1,
h2 {
color: #cc6600;
border-bottom: thin dotted #888888;
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
table table th {
background-color: white;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
th {
background-color: #cc6600;
}
.cellcolor {
background-color: #fcba7a;
}
caption {
font-style: italic;
padding-top: 8px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
li {
/* list-style-image: url(images/backpack.gif); */
padding-top: 5px;
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Trip Around the USA on a Segway</title>
<link type="text/css" rel="stylesheet" href="journal.css">
</head>
<body>
<h1>Segway'n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2012</h2>
<p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico"></p>
<p>
Well I made it 1200 miles already, and I passed through some interesting places on the way:
</p>
<table>
<caption>
The cities I visited on my Segway'n USA travels
</caption>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">75</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">265</td>
<td class="center">3/5</td>
</tr>
<tr>
<td rowspan="2">Truth or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td rowspan="2" class="right">4,242 ft</td>
<td rowspan="2" class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">August 27th</td>
<td class="center">98</td>
<td class="center">
<table>
<tr>
<th>Tess</th>
<td>5/5</td>
</tr>
<tr>
<th>Tony</th>
<td>4/5</td>
</tr>
</table>
</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
<h2>July 14, 2012</h2>
<p>
I saw some Burma Shave style signs on the side of the road today:
</p>
<blockquote>
<p>
Passing cars, <br> When you can't see, <br> May get you, <br> A glimpse, <br> Of eternity. <br>
</p>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2>June 2, 2012</h2>
<p><img src="images/segway1.jpg" alt="The first day of the trip"></p>
<p>
My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:
</p>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
<p>
Just the essentials. As Lao Tzu would have said, <q>A journey of a
thousand miles begins with one Segway.</q>
</p>
<!--
<p>
To do list:
</p>
<ul>
<li>Charge Segway</li>
<li>Pack for trip
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>a protein bar</li>
</ul>
</li>
</ul>
-->
</body>
</html>
I need to place the column headings over the columns without the borders around them. Ideally the table should look like the picture I include in this post, but it's smushed and I'm not really sure why because I don't do tables often. Any idea what's gone wrong? Any help is appreciated.
/*
CSS for Lounge Project
Filename: styles.css
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/
/*Drink font colors*/
h2.green {
color: green;
}
h2.blue {
color: blue;
}
h2.purple {
color: purple;
}
h2.red {
color: red;
}
h2.yellow {
color: gold;
}
/*center and border image*/
img.smlounge {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: red;
}
/*Table styles*/
td, th {
border: 1px solid black;
font-size: 1.3em;
width: 60%;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Head First Lounge Elixirs</title>
<!--
Elixir page for Lounge Project
Filename: elixir.html
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
-->
<link type="text/css" rel="stylesheet" href="../lounge.css" />
</head>
<body>
<h1>Our Elixirs</h1>
<h2 class="green">Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler"/>
Chock full of vitamins and minerals, this elixir
combines the healthful benefits of green tea with
a twist of chamomile blossoms and ginger root.
</p>
<hr/>
<h2 class="blue">Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration"/>
Combining raspberry juice with lemon grass,
citrus peel and rosehips, this icy drink
will make your mind feel clear and crisp.
</p>
<hr/>
<h2 class="purple">Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir"/>
Blueberries and cherry essence mixed into a base
of elderflower herb tea will put you in a relaxed
state of bliss in no time.
</p>
<hr/>
<h2 class="red">Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast"/>
Wake up to the flavors of cranberry and hibiscus
in this vitamin C rich elixir.
</p>
<hr/>
<h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
<p><img src="../images/yellow.gif" alt="Lemon Breeze Drink"/>
The ultimate healthy drink, this elixir combines
herbal botanicals, minerals, and vitamins with
a twist of lemon into a smooth citrus wonder
that will keep your immune system going all
day and all night.
</p>
<hr/>
<br/>
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2">Drink</th>
<th colspan="2">Size</th>
<th colspan="2">Price</th>
</tr>
<tbody>
<tr>
<td rowspan="2" colspan="2">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2">Lemon Breeze</td>
<td>Iced</td>
<td>16 oz.</td>
<td>$3.75</td>
</tr>
<tr>
<td>Frozen</td>
<td>20 oz.</td>
<td>$4.75</td>
</tr>
</thead>
</table>
<p>Back to the Lounge</p>
<footer>
©2016, Head First Online Lounge<br />
All trademarks and registered trademarks appearing on this site are
the property of their respective owners.
</footer>
</body>
</html>
You're looking for the CSS border-collapse property. Remove the width: 60%; declaration from td, th and add:
table {
width: 100%;
border-collapse: collapse;
}
I also added a .drink-name selector to ease the job of centering certain table cells while left-aligning others. Feel free to change the padding I added to each cell as you see fit.
To make the columns equal-width, you should add:
td[colspan="2"] {
width: 33.333%;
}
Demo Snippet:
/*
CSS for Lounge Project
Filename: styles.css
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
*/
/*Drink font colors*/
h2.green {
color: green;
}
h2.blue {
color: blue;
}
h2.purple {
color: purple;
}
h2.red {
color: red;
}
h2.yellow {
color: gold;
}
/*center and border image*/
img.smlounge {
display: block;
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: red;
}
/*Table styles*/
td, th {
border: 1px solid black;
font-size: 1.3em;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0 1em ;
}
table {
border-collapse: collapse;
width: 100%;
}
td[colspan="2"] {
width: 33.333%;
}
.drink-name {
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Head First Lounge Elixirs</title>
<!--
Elixir page for Lounge Project
Filename: elixir.html
Author: Justus Self
Date: 3/21/17
HTML5 and CSS3 Illustrated Unit I, Lounge Independent Project
-->
<link type="text/css" rel="stylesheet" href="../lounge.css" />
</head>
<body>
<h1>Our Elixirs</h1>
<h2 class="green">Green Tea Cooler</h2>
<p>
<img src="../images/green.jpg" alt="Green Tea Cooler" /> Chock full of vitamins and minerals, this elixir combines the healthful benefits of green tea with a twist of chamomile blossoms and ginger root.
</p>
<hr/>
<h2 class="blue">Raspberry Ice Concentration</h2>
<p>
<img src="../images/lightblue.jpg" alt="Rasberry Ice Concentration" /> Combining raspberry juice with lemon grass, citrus peel and rosehips, this icy drink will make your mind feel clear and crisp.
</p>
<hr/>
<h2 class="purple">Blueberry Bliss Elixir</h2>
<p>
<img src="../images/blue.jpg" alt="Blueberry Bliss Elixir" /> Blueberries and cherry essence mixed into a base of elderflower herb tea will put you in a relaxed state of bliss in no time.
</p>
<hr/>
<h2 class="red">Cranberry Antioxidant Blast</h2>
<p>
<img src="../images/red.jpg" alt="Cranberry Antioxidant Blast" /> Wake up to the flavors of cranberry and hibiscus in this vitamin C rich elixir.
</p>
<hr/>
<h2 class="yellow"><a name="Yellow">Lemon Breeze</a></h2>
<p><img src="../images/yellow.gif" alt="Lemon Breeze Drink" /> The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth citrus wonder that will keep your immune system going all day
and all night.
</p>
<hr/>
<br/>
<table>
<thead>
<tr>
<th colspan="6">Our Drink Prices</th>
</tr>
<tr>
<th colspan="2" style="border-right:0">Drink</th>
<th colspan="2" style="border-left:0;border-right:0">Size</th>
<th colspan="2" style="border-left:0">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Green Tea Cooler</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Raspberry Ice Concentration</td>
<td colspan="2">16 oz.</td>
<td colspan="2">$3.75</td>
</tr>
<tr>
<td colspan="2">24 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td colspan="2" class="drink-name">Cranberry Antioxidant Blast</td>
<td colspan="2">20 oz.</td>
<td colspan="2">$4.75</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="drink-name">Lemon Breeze</td>
<td>Iced</td>
<td>16 oz.</td>
<td>$3.75</td>
</tr>
<tr>
<td>Frozen</td>
<td>20 oz.</td>
<td>$4.75</td>
</tr>
</tbody>
</table>
<p>Back to the Lounge</p>
<footer>
©2016, Head First Online Lounge<br /> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
</footer>
</body>
</html>
First of all, close your thead and tbody tags properly and then add this code in your css. here is jsfiddle: https://jsfiddle.net/ohtduqso/
table {
border-collapse: collapse;
border: 1px solid black;
}
td,
th {
border: 1px solid black;
font-size: 1.3em;
width: 60%;
margin-left: auto;
margin-right: auto;
}
th {
border-left: none;
border-right: none;
}
https://jsfiddle.net/v86x4ehh/1/
just add these classes to your css
table tr:nth-child(2){
border:none;
}
table{
border-collapse:collapse;
border:1px solid black;
}
I'm working on an assignment where we have to create a website that is formatted similarly to a picture of a resume. The picture is here: link
I have most of the formatting correctly, but there are a couple things I can't figure out. First of all, how do I create a table header style similar to the one in the image?
Also, how can I make the name and picture area into a block and add those two borders?
Oh, and how come my icons for my list turned out to be chinese characters, I copied the code for the sideways triangle, but it came out as that. And the codes weren't working for the phone/email either so I ended up using a picture of them instead.
<!DOCTYPE html>
<html>
<head>
<title>Job Resume</title>
</head>
<style>
body {
font-family: Arial;
font-size: 12px;
width: 800px;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
background-color: lightblue;
border: none;
padding: 3px;
}
td {
border: none;
padding: 10px
}
ul {
list-style: none;
padding: 0px;
}
ul li:before {
content: '\9654';
margin: 0 1em;
}
</style>
<body>
<table style="float:right; width: 300px;">
<tr>
<th colspan="2">Contact</th>
</tr>
<tr>
<td style="padding: 3px"><img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 747-357-2004</td>
<td style="padding: 3px">54th Street,</br>17th Floor,</td>
</tr>
<tr>
<td style="padding: 3px"><img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 327-127-8390</td>
<td style="padding: 3px">New York,</br>United States.</td>
</tr>
<tr>
<td style="padding: 3px"><img src="email.jpg" alt="HTML5 Icon" style="float: left;">: rachelgarner#gmail.com</td>
<td style="padding: 3px">NY 10022</td>
</tr>
</table>
</br>
</br>
<p><img src="rachel_garner.jpg" alt="HTML5 Icon" style="float: left;">
<span style="font-size: 25px"><b>RACHEL GARNER</b></span>
</br><span style="color: orange">MARKETING MANAGER</span></br>
</br></br></br><span style="color: blue">www.google.com</span></p>
<table width="100%">
<tr>
<th colspan="2">Profile</th>
</tr>
<tr>
<td><b>Personal Statement:</b></td>
<td>Experienced in administrative duties; scheduled meetings, handled travel arrangements and
purchasing. Computer skills include Microsoft Excel, Access, Word, and PowerPoint.
Excellent problem solving and communication skills. Accustomed to long work hours.
Winner: Employee of the Month 1999 for October and December.</td>
</tr>
<tr>
<td><b>Career Objective:</b></td>
<td>To obtain an executive sales/marketing management position within a growth oriented,
progressive company. I want to apply my business development/sales skills to an
environment where they will make a significant impact on the bottom line. The idea
atmosphere would be entrepreneurial and one in which new ideas are welcome and
decision making is required.</td>
</table>
</br>
<table width="100%">
<tr>
<th>Key Skills</th>
</tr>
<tr>
<td>This is a main summary of my skills.</td>
</tr>
<tr>
<td>
<ul>
<li>Negotiating (Intermediate)</li>
<li>Access (Beginner)</li>
<li>Accounting (Beginner)</li>
<li>Sales Auditing (Expert)</li>
<li>Invoicing (Intermediate)</li>
</ul>
</td>
</tr>
</table>
</br>
<table width="100%">
<tr>
<th>Education</th>
</tr>
<tr>
<td><b>Bachelor's Degree</b> - <i>Marketing</i> <span style="float: right;"><b>2002 - 2006</b></span></td>
</tr>
<tr>
<td><b>The University of Mississippi</b>, MS</td>
</tr>
<tr>
<td>Bachelor of Business Administration May 2001 Major: Marketing, Minor: International Business Overall GPA: 3.0, Major GPA: 3.3</td>
</tr>
</table>
</br>
<table width="100%">
<tr>
<th>Work Experience</th>
</tr>
<tr>
<td><b>University Hallmark Oxford, MS <span style="float:right;"><i>Full Time</i></span></b></td>
</tr>
<tr>
<td><b>Sales Clerk</b><i> (Invoicing, Administration)</i> <span style="float:right;"><b>Oct 2001 to Present</b></span></td>
</tr>
<tr>
<td>Full time roll overseeing the operation of the sales and marketing department.</td>
</tr>
<tr>
<td><ul>
<li>Successfully perform managerial duties during manager's absence</li>
<li>Train new employees and conduct company and product orientations</li>
</ul></td>
</tr>
</table>
</body>
</html>
This is what my website looks like so far:
Line break is defined as <br> not </br>
<span> doesn't need to be inside <p> because you can write your text in <span> directly & it will show up.
You don't need to write <br> between everything, Just type spaces, HTML will ignore them. This is not python!
body {
font-family: Arial;
font-size: 12px;
width: 800px;
}
table {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
background-color: lightblue;
border: none;
padding: 3px;
}
td {
border: none;
padding: 10px
}
ul {
list-style: none;
padding: 0px;
}
ul li:before {
content: '\9654';
margin: 0 1em;
}
#headerMenu {
display: inline-block;
/* it will act same as display:table; except if any element sit on it */
height: 125px;
/* same as Contact Table Height*/
padding: 2px;
border-top: 2px solid grey;
border-bottom: 2px solid grey;
}
#contactTable {
margin-right: 180px;
margin-bottom: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Job Resume</title>
</head>
<body>
<table id="contactTable" style="float:right; width: 300px;">
<tr>
<th colspan="2">Contact</th>
</tr>
<tr>
<td style="padding: 3px">
<img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 747-357-2004</td>
<td style="padding: 3px">54th
<br>Street,17th Floor,</td>
</tr>
<tr>
<td style="padding: 3px">
<img src="phone.jpg" alt="HTML5 Icon" style="float: left;">: 327-127-8390</td>
<td style="padding: 3px">New York,United States.</td>
</tr>
<tr>
<td style="padding: 3px">
<img src="email.jpg" alt="HTML5 Icon" style="float: left;">: rachelgarner#gmail.com</td>
<td style="padding: 3px">NY 10022</td>
</tr>
</table>
<div id="headerMenu">
<img src="rachel_garner.jpg" alt="HTML5 Icon" style="float: left;">
<h1 style="font-size: 20px; padding:20px;"><b>RACHEL GARNER</b></h1> <span style="color: orange"><br>MARKETING MANAGER</span> <span style="color: blue">www.google.com</span>
</div>
<table width="100%">
<tr>
<th colspan="2">Profile</th>
</tr>
<tr>
<td><b>Personal Statement:</b>
</td>
<td>Experienced in administrative duties; scheduled meetings, handled travel arrangements and purchasing. Computer skills include Microsoft Excel, Access, Word, and PowerPoint. Excellent problem solving and communication skills. Accustomed to long work
hours. Winner: Employee of the Month 1999 for October and December.</td>
</tr>
<tr>
<td><b>Career Objective:</b>
</td>
<td>To obtain an executive sales/marketing management position within a growth oriented, progressive company. I want to apply my business development/sales skills to an environment where they will make a significant impact on the bottom line. The idea
atmosphere would be entrepreneurial and one in which new ideas are welcome and decision making is required.</td>
</tr>
</table>
<table width="100%">
<tr>
<th>Key Skills</th>
</tr>
<tr>
<td>This is a main summary of my skills.</td>
</tr>
<tr>
<td>
<ul>
<li>Negotiating (Intermediate)</li>
<li>Access (Beginner)</li>
<li>Accounting (Beginner)</li>
<li>Sales Auditing (Expert)</li>
<li>Invoicing (Intermediate)</li>
</ul>
</td>
</tr>
</table>
<table width="100%">
<tr>
<th>Education</th>
</tr>
<tr>
<td><b>Bachelor's Degree</b> - <i>Marketing</i> <span style="float: right;"><b>2002 - 2006</b></span>
</td>
</tr>
<tr>
<td><b>The University of Mississippi</b>, MS</td>
</tr>
<tr>
<td>Bachelor of Business Administration May 2001 Major: Marketing, Minor: International Business Overall GPA: 3.0, Major GPA: 3.3</td>
</tr>
</table>
<table width="100%">
<tr>
<th>Work Experience</th>
</tr>
<tr>
<td><b>University Hallmark Oxford, MS <span style="float:right;"><i>Full Time</i></span></b>
</td>
</tr>
<tr>
<td><b>Sales Clerk</b><i> (Invoicing, Administration)</i> <span style="float:right;"><b>Oct 2001 to Present</b></span>
</td>
</tr>
<tr>
<td>Full time roll overseeing the operation of the sales and marketing department.</td>
</tr>
<tr>
<td>
<ul>
<li>Successfully perform managerial duties during manager's absence</li>
<li>Train new employees and conduct company and product orientations</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
All Errors Fixed.
The Chinese text problem is here:
ul li:before {
content: '\9654';
margin: 0 1em;
}
Just delete :
ul {
list-style: none;
padding: 0px;
}
ul li:before {
content: '\9654';
margin: 0 1em;
}
If you want using Bullet with symbol, you can use it:
For a circle:
ul {
list-style-type: circle;
}
For a Square:
ul {
list-style-type: square;
}
For using image:
ul {
list-style-image: url('your-image.png');
}
You can't always use tables for design a layout on the website.
First, try learn some CSS for layout element, like margin, padding, float, or clear.
I hope this can help you.