Member Avatar for cavpollo

How can I make this HTML into CSS? Also, after making it css I want to save it in a file (.css) and then call it from a different file (an html web page). What I dont know is how to add the "custom code" (the table has 2 holes. An image goes inside the first hole and in the second one I want to add the"custom code" that will be found in my html page).

<table  border="1" cellpadding="5" cellspacing="0" width="100%" style="border-width: 4px; border-style:solid; border-color: blue;">

<tr>
<th style="text-align:left; background-color:#00008B; border-width: 4px; border-style: inset; border-color: black;">
        <a href=""><img src=""; border="0"; style="float: left"; alt="Go To CAVPOLLOS Comics!!!"  /> </a>
</th>
<tr><th>
<!--Stuff I want to add from the page this code is called -->
</tr></th>
</table>
  • 2 Contributors
  • 1 Reply
  • 207 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

A short follow-up that builds on 's question and 's points: move presentation to an external stylesheet, but for the "custom code" inside the second cell you need one of two families of solutions — server-side inclusion (best for SEO, works without JavaScript) or client-side insertion (works on static hosts but requires JavaScript). A third quick-and-dirty option is an iframe (fast to implement but poor for styling and SEO). Below are concrete, practical patterns and a few gotchas.

Server-side include (recommended if your host supports it). Put the snippet you want to reuse in a small HTML fragment file and include it from the page that renders the table. Example (page must be parsed by PHP):

<?php
// inside your .php page where the table cell is rendered
include 'custom-snippet.html';
?>

Notes: the included file should be an HTML fragment (no full doctype/head), and the parent file must have the server-side extension (.php, .asp, etc.) so the server executes the include.

Client-side insertion (useful on static hosting). Load the fragment with Fetch or a helper like jQuery and inject it into the cell:

<script>
fetch('custom-snippet.html')
  .then(function(r){ return r.text(); })
  .then(function(html){ document.querySelector('.contentCell').innerHTML = html; })
  .catch(function(e){ console.error('Load failed', e); });
</script>

Or, if you already use jQuery: $('.contentCell').load('custom-snippet.html');

Caveats: same-origin/CORS rules apply, and injected HTML can introduce XSS if not controlled — sanitize content. Always provide fallback content inside the cell (so users without JS or a failed include still see something).

Final tips: prefer semantic HTML + CSS layout (flexbox/grid) instead of using a table for layout if you can rewrite it. When troubleshooting, check file extensions, server error logs, and the browser Network console for 404/CORS errors, and make sure paths are correct relative to the requesting file.

Member Avatar for Airshow

Cavpollo,

You can't convert HTML to CSS. They are different things. CSS is concerned with presentation while HTML "describes" content (and historically allows a certain degree of control over presentation, which should be delegated to CSS these days).

What you can do is remove your inline CSS styles and put them in a separate style sheet. This is very simple:

.myTable {
	border-width : 4px;
	border-style : solid;
	border-color : blue;
}
.myTable .imageCell {
	text-align : left;
	background-color : #00008B;
	border-width : 4px;
	border-style : inset;
	border-color : black;
}
.myTable .imageCell img {
	border : 0;
	float : left;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Move inline styles to Style Sheet</title>
<link rel="stylesheet" type="TEXT/CSS" href="styles.css">
</head>

<body>

<table class="myTable" border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<th class="imageCell"><a href=""><img src=""; alt="Go To CAVPOLLOS Comics!!!"  /></a></th>
<tr><th>
<!-- Stuff I want to add from the page this code is called -->
</th></tr></table>

</body>
</html>

Save the CSS to a separate file named styles.css , in the same folder as the main, HTML file.

The "Stuff I want to add from the page this code is called" is not something that CSS can help you with. You need to use a server-side scripting language such as PHP/ASP/JSP, though it can also be achieved with Javascript.

Server-side scripting allows marked up content to be generated dynamically - often in concert with a database. Less typically, server-side scripts can be used to generate CSS and client-side script (Javascript) dynamically. CSS and Javascript are more typically hard coded.

The best approach depends on exactly what you are trying to achieve, and where the "Stuff you want to add" is generated/stored.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.