Sublime Forum

CSS and HTML text together

#1

Is there a special feature I need to click on to use CSS and HTML together on the Sublime text editor? Or is there something wrong with the code I am attempting to use?

<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style>
	table {
		border: 1px black solid;
	}

	table th {
		border: 1px black solid;
	}

	table td{
		border: 1px black solid;
	}
</head>
<body>
	<table style="border: 1 px black solid;">
		<tr>
			<th>Player name</th>
			<th>shots</th>
			<th>points</th>
			<th>free throws</th>
			<th>Rebounds</th>
			<th>Steals</th>
			<th>Assists</th>
		</tr>
		<tr>
			<td>jack</td>
			<td>95</td>
			<td>40</td>
			<td>30</td>
			<td>20</td>
			<td>40</td>
			<td>49</td>
		</tr>
		<tr>
			<td>bob</td>
			<td>34</td>
			<td>32</td>
			<td>90</td>
			<td>45</td>
			<td>12</td>
			<td>10</td>
	</table>	
</body>
</html>
0 Likes
#2

That depends; what issue are you seeing? If it’s syntax highlighting related, that should work out of the box. If your problem is that when you load the page into your browser you don’t see what you expect, that’s not a Sublime problem; it’s just for editing the file.

0 Likes
#3

When I go to the browser view in sublime the browser is blank with the CSS code added. If I take the CSS code out the html works.

0 Likes
#4

You are missing a closing style tag

1 Like
#5

Upon looking at the code I found a few missing end tags. It still won’t show anything in browser view.

0 Likes
#6

Share the updated code

0 Likes
#7

Not sure how to keep it in regular code as opposed to making the code print out.

<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style>
	table {
		border: 1px black solid;
	}

	table th {
		border: 1px black solid;
	}

	table td {
		border: 1px black solid;
	}
</head>
<body>
	<table style="border: 1 px black solid;">
		<tr>
			<th>Player name</th>
			<th>shots</th>
			<th>points</th>
			<th>free throws</th>
			<th>Rebounds</th>
			<th>Steals</th>
			<th>Assists</th>
		</tr>
		<tr>
			<td>jack</td>
			<td>95</td>
			<td>40</td>
			<td>30</td>
			<td>20</td>
			<td>40</td>
			<td>49</td>
		</tr>
		<tr>
			<td>bob</td>
			<td>34</td>
			<td>32</td>
			<td>90</td>
			<td>45</td>
			<td>12</td>
			<td>10</td>
		</tr>
	</table>
    </style>
	</body>
</style>
</body>
</html>
0 Likes
#8

Wrap it in triple backticks like this (optionally, the html on the first line provides a hint for what the syntax is):

```html
<html>
</html>
```
0 Likes
#9

You want this the following for this. Yours had the </style> tag in the wrong place, and redundantly twice.

Rule of thumb, <bob> starts a tag, then you put whatever is supposed to be inside of that tag, and then </bob> to say bob is done now.

So, since the <style> tag is wrapping the style, the place for </style> is where the style is done. Similarly if <body> opens the body of the page, there should be exactly one </body> at the point where the body is done.

<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<style>
    table {
        border: 1px black solid;
    }

    table th {
        border: 1px black solid;
    }

    table td {
        border: 1px black solid;
    }
</style>
</head>
<body>
    <table style="border: 1 px black solid;">
        <tr>
            <th>Player name</th>
            <th>shots</th>
            <th>points</th>
            <th>free throws</th>
            <th>Rebounds</th>
            <th>Steals</th>
            <th>Assists</th>
        </tr>
        <tr>
            <td>jack</td>
            <td>95</td>
            <td>40</td>
            <td>30</td>
            <td>20</td>
            <td>40</td>
            <td>49</td>
        </tr>
        <tr>
            <td>bob</td>
            <td>34</td>
            <td>32</td>
            <td>90</td>
            <td>45</td>
            <td>12</td>
            <td>10</td>
        </tr>
    </table>
</body>
</html>
0 Likes