I have the following HTML:
<ol>
<li>foo</li>
<li>bar</li>
<li>testing</li>
<li>hello world</li>
</ol>
This, of course, works and gives the following output:
1. foo
2. bar
3. testing
4. hello world
Now my problem is that I sometimes need to have different text instead of the numbers. The text should be completely customizable, so CSS :before solutions don't work for me.
Consider this example, a listing of TV series episodes:
12. The Duel
13. Prince Family Paper
14./15. Stress relief
16. Lecture Circuit: Part 1
So essentially I'm trying to create a "fake" <ol> so that all the text after the numbers is correctly aligned. Is there any way I can achieve this in HTML/CSS?
I think that you will have to solve it with a table without borders. Align the first tds to the right and the second ones to the left. Is what I think that would most closely resemble what you want.
Something like:
css:
table {
border: none;
}
table tr td:first-child {
text-align: right;
}
html:
<table>
<tr>
<td>12.</td>
<td>The Duel</td>
</tr>
<tr>
<td>13.
<td>Prince Family Paper
</tr>
<tr>
<td>14./15.</td>
<td>Stress relief</td>
</tr>
<tr>
<td>16.</td>
<td>Lecture Circuit: Part 1</td>
</tr>
</table>
Related
I've just been given a take home exam for a job as an email developer. My task is to try my best to create an HTML email out of a .png file. I've been using tables, and I've come to a section where I have to insert an image alongside text, and I'm crashing and burning. The header text is too far displaced from the paragraph, and the image doesn't sit well; does anyone have any ideas on how to resolve the issue? My code is as follows:
div #costume-section {
width:645px;
height: 225px;
padding-left: 05px;
background: #ff821d;
color: white;
}
<div id="costume-section">
<table>
<th id="cos-font">Costume Contest</th>
<tr>
<td>Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on) We'll hold a kid contest too!</td>
<td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png" /></td>
</tr>
</table>
</div>
👋 Rachelledev
Think about this like you are working in a spreadsheet. You have set a th and a tr table row.
Since you have your header text outside of the row containg the 2 td's the header text sits on top of the tr containing the text and the image.
Rearranging the table markup you don't really need the th in this scenario unless its a requirement.
<div id="costume-section">
<table>
<tr>
<td>
<h1>Costume Contest</h1>
Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on) We'll hold a kid contest too!</td>
<td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png" /></td>
</tr>
</table>
</div>
I'm working on a project where I've made my phpmyadmin database spit out a set of 6 images on my webpage. I've put it into a table and this is where the trouble begins - even though it sounds easy!
I need the images to be in three's, in a horizontal line.
I will have 6 images most of the time so 3 per row with good spacing/padding etc.
I've tried a lot of things and played around with the CSS but couldn't get it to work.
Here are (respectively) the actual page and how it looks, the CSS for it and the actual code/script of the table:
Actual Page
CSS for the table: table.Evidence td {
padding:0px,10px,0px,0px;
}
Script for the table:
It looks very easy but I couldn't make it work.
Any help would be much appreciated!
I'm new so please bear with me until I get used to this.
The first thing is that if you define all 4 paddings in one command you have to seperate them with spaces.
table.Evidence td { padding:0px 10px 0px 0px; }
It also seems that you don't use the table tags right.
With an tr you are adding tan new row and with an td you are adding a new cell.
A table of 2x2 cells would look like:
<table border="1">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
<td>
4
</td>
</tr>
</table>
Your <tr></tr> tags should be after every third image, so the if in your while should be:
if($i % 3 == 0){
echo "</tr></tr>";
}
else{
echo "<td><img something...></td>";
}
Also you must have one <tr> opening tag directly after the <table> tag, and one </tr> closing tag directly before the </table> tag.
I have a table with the following structure:
html {
width: 400px;
}
<table>
<tr>
<td>Description:</td>
<td style="white-space: pre-wrap;">
Some text which could be quite long with some 'simple' lists created by the user like this:
- Point 1
- Point 2
- Point 3
- Another point which is a bit longer than the previous one
- Point 4
</td>
</tr>
</table>
When I would view this in the browsers, on a screen with a small width, one of the bullet points will wrap to the new line and start at the beginning of this new line.
Ideally I want this bullet point to have the same indentation as the line before so both lines of text of the same bullet point will have the same indentation.
In case you're wondering, the reason why there is no ordered or unordered list element is because the user is limited to using a simple textarea to enter their content.
Could anyone tell me if this is possible, and if so, how?
Thanks in advance.
Shouldn't the code be like this:
<table>
<tr>
<td>Description:</td>
<td style="white-space: pre-wrap;">
Some text which could be quite long with some 'simple' lists created by the user like this:
<ul>
<li>Point 1</li>
<li>Point 2</li>
<li>Point 3</li>
<li>Another point which is a bit longer than the previous one</li>
<li>Point 4</li>
</ul>
</td>
</tr>
</table>
You need to use proper ul and li tags instead of -.
EDIT
If you are willing to populate the value from some text-area field, then you might implement WYSIWYG text editors like TinyMCE, CKeditor .
I've got a Wiki which uses Textile to markup text. I'm trying to put a list within a table cell, and I can't seem to figure out how. I'm trying to replicate the following HTML in Textile:
<table>
<tr>
<td>Cell One</td>
<td>
Cell Two
<ol>
<li>Lorem</li>
<li>Ipsum</li>
</ol>
</td>
</tr>
</table>
Tried a lot of things but couldn't get anything to work. Is it possible todo this without using <li> HTML tags in Textile?
I have the same problem currently in RubyMine. I have a solution that works on Textile, perhaps it helps you:
|Cell One|Cell Two ==<ol><li>Lorem</li>
<li>Ipsum</li></ol>== test|
It doesn't work in Redmine, though :(
I want to add two table or more consecutively and they must be seemed like one table.
<html>
<head>
<style type="text/css">
.cls
{
border:1px solid #000000;
}
.cls td {
border:1px solid #000000;
}
</style>
</head>
<body>
<table class="cls">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
<table class="cls">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
</body>
</html>
My problem is the line that tables combined has a doble line normally. How can i show it like a single line.
.cls-last
{
border-top: 0px;
}
On your 2nd table:
<table class="cls cls-last">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
You could change the top (or bottom) border of the table via CSS.
However, alignment could be a challenge here. In the example you gave, not a problem--each contains 3 (relatively) similar characters each. So, it'd be nearly identical. However if one column in one table has 10 characters for instance, HTML is going to stretch that column and you're going to be left with two obviously different entities.
So, to make this work 100% of the time, you're going to need to set widths and (possibly) overflow properties as well.
I'm having a tough time understanding why you'd have to do it this way. I'm sure you've got a reason, but two similar entities with similar widths and columns should be able to be commingled. If the tables were to only sometimes appear, or you wanted to remove rows, you could do so via Javascript and/or CSS or at the server level when rendering.