Tables to DIVs

Discussing Html . Code , Software , other

Moderators: egami, macek, gesf

Post Reply
User avatar
KramsonKrate
New php-forum User
New php-forum User
Posts: 8
Joined: Wed Apr 28, 2021 4:48 pm

Sat May 15, 2021 9:16 pm

I'm refactoring a page with a responsive template, and I'd like to understand how I can replace this table with DIVs:

Code: Select all

 <p align="center">
   	  <table align="center" cellpadding="0" bgcolor="#FFFFFF" width="890" border="1">
		<tr>
		  <td>
			<div id="sse1">
			<div id="sses1">
				<ul>
					<li><a href="/pages/classics.php">Classics</a></li>
					<li><a href="/pages/history.php">History</a></li>
					<li><a href="/pages/literature.php">Literature</a></li>
					<li><a href="/pages/nonfiction.php">Non-Fiction</a></li>
				</ul>
			</div>
			</div>
		  </td>
		</tr>
	  </table>        
      </p>
Can someone point me in the right direction here?
User avatar
hyper
php-forum GURU
php-forum GURU
Posts: 1222
Joined: Mon Feb 22, 2016 5:52 pm

Wed May 19, 2021 11:34 am

It's already done:

Code: Select all

<ul>
        <li><a href="/pages/classics.php">Classics</a></li>
        <li><a href="/pages/history.php">History</a></li>
        <li><a href="/pages/literature.php">Literature</a></li>
        <li><a href="/pages/nonfiction.php">Non-Fiction</a></li>
      </ul>
Then style it using CSS.

O.K., you may think - how does that help?

An unordered list is a block level element, so we just create a basic navigation bar. Left as it is, the list items will stack on top of each other; using CSS you can line them up horizontally and give them a bit of style losing all of that html out of date inline style.

Code: Select all

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- important for responsive pages -->
    <link href='/my-first-stylesheet.css' rel='stylesheet'>
    <title>Refactored</title>
  </head>

  <body>
    
    <header>
      <h1>My Refactored Web Site</h1>
    </header>
    
    <nav>
    
      <ul>
        <li><a href="/pages/classics.php">Classics</a></li>
        <li><a href="/pages/history.php">History</a></li>
        <li><a href="/pages/literature.php">Literature</a></li>
        <li><a href="/pages/nonfiction.php">Non-Fiction</a></li>
      </ul>
      
    </nav>
    
  </body>
  
</html>
Save this as a new file 'my-first-stylesheet.css' in root.

Code: Select all

h1 {
  font: large sans-serif;
  color: blueviolet; /* color is the font-colour of this element */
  text-shadow: 2px 2px blue;
}
ul {
  width: 90%;
  background: green;
  border: 2px solid orange;
  border-radius: 3px;
  margin: 10px auto;
}
li {
  display: inline;
  background: orange;
  border: 3px;
  border-radius: 2px;
}
Ok, plenty to play with.

I suggest that you work on what the pages look like at the moment rather than how you got them to look like that before.
luciham20
New php-forum User
New php-forum User
Posts: 1
Joined: Mon Jun 14, 2021 9:04 pm

Mon Jun 14, 2021 9:05 pm

Thanks for the information on this. I really enjoy the information. google
Post Reply