I have a table with 2 columns and on each column I have a different size of font (the bigger size font also strong).
My problem is the vertical alignment of the text: it doesn't align vertically (see the image):
Here's my html code:
<html>
<head>
<style>
.big-text-size {
font-size: 3.5em;
}
.small-text-size {
font-size: 1.1em;
}
</style>
</head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Any suggestions why does it happen?
Tweak the vertical alignment of your different-size-text (see here):
<html>
<head><style>
.big-text-size {
font-size: 3.5em;
vertical-align: text-bottom;
}
.small-text-size {
font-size: 1.1em;
vertical-align: text-bottom;
}
</style></head>
<body>
<table>
<td class="big-text-size">
<strong>My doctor's name</strong>
</td>
<td class="small-text-size"> Daniel Boro </td>
</table>
</body>
</html>
Your second table doesn't have any rows...
<table>
<tr> <!-- Missing -->
<td class="small-text-size">Daniel Boro</td>
<td class="big-text-size"><strong>My doctor's name</strong></td>
</tr>
</table>
try including rows in your table..
you can also visit this site http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html It provides 4 CSS tricks that you can use to align text vertically in a table cell
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last month.
Improve this question
Here is how it should look
Here how it looks
`
https://codepen.io/SevastianBah/pen/VwBaPVB
`
I suppose that it is related some how to the big red block. In code inspector, there is no any margins or paddings for block.
I have gone through your code pen. You tried to demonstrate the table using nested table inside the tag. However it can may be fulfill your target. But using colspan and rowspan property you can easily demonstrate the table.
Here I have demonstrated it using colspan rowspan. Well the concept is pretty easier. Look carefully at your targeted table. There you can easily equally divided each cells in total 4 rows and 3 columns. Where the 1st cell taken two column and two row. So we declared colspan value 2 and rowspan value 2. These will allow the cell to take two rows and two column. then the rest td will represent other cells. So as 1st td taken 2 columns and two rows so in 1st and second rows total td will be 3 and 2. but in third row each td will take one cell.
In css the border collapse will remove the spaces in between. Then you can add border to each td. Go through the code below. Hope this might help you.
table{
width: 600px;
height: 400px;
border-collapse: collapse;
}
td{
border: 2px solid black
}
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table>
<tr>
<td style='background-color: red' colspan='2' rowspan='2'></td>
<td style='background-color: blue'></td>
<td style='background-color: red'></td>
</tr>
<tr>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
</tr>
<tr>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
<td style='background-color: red'></td>
<td style='background-color: blue'></td>
</tr>
</table>
</body>
</html>
Float td left:
td{
margin: 0;
padding: 0;
float: left;
}
.big{
width: 240px;
height: 240px;
}
.small{
width: 120px;
height: 120px;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
div{
border: 2px black solid;
}
td{
margin: 0;
padding: 0;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="/css/style.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table>
<tr>
<td><div class="big red"></div></td>
<td>
<table>
<tr>
<td><div class="small blue"></div></td>
<td><div class="small red"></div></td>
</tr>
<tr>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
<td><div class="small red"></div></td>
<td><div class="small blue"></div></td>
</tr>
</table>
</body>
</html>
I am writing an html email using inline styles since I'll be sending it in Outlook and read that's the best way to circumvent browser reformatting. I want to center the two links below, which I put into table cells because that's the only way I could get padding to work in Outlook. I would like the 2 links to appear centered with their background and padding on the page, but I don't know how to do that using inline styling and tables. Can anyone help? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "wall cuts, train stations, New York City"
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
<table>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
First, instead of using padding on each cell, you can just specify cellpadding attribute for a table tag -
<table cellpadding="10">
The cell content is centered by default -
<table cellpadding="10">
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
<tr>
<td style="background-color: red;">
Link 1<br/>
Link 2
</td>
</tr>
</table>
UPD
To center the whole table, set margin to 0 auto -
<table style="margin: 0 auto;">
To center only either a row or a column, apply accordingly -
<tr style="width: 50%; margin: 0 auto; display: table;"></tr>
or
<td style="width: 50%; margin: 0 auto; display: table;"></td>
You add an align attribute to the td cell.
<td align="center" style="padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;"> Your link
</td>
Adding margin to body tag, will that work for you.
<body style="margin-top:20%;margin-bottom:20%;margin-left:30%;">
Use text-align:center, vertical-align:middle,
table{width:100%;height:100%;}
td{width:100%;height:100%; text-align:center; vertical-align:middle; font-size: 14px; }
a, a:link, a:visited{padding:10px; display:inline-block; color: white; text-decoration: none;margin:10px; background: #3D87F5; }
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body>
<div id="centerme">
<table>
<tr>
<td>
Watch my film "wall cuts, train stations, New York City"
<br/>
Watch my film "red hook, rush hour"
</td>
</tr>
</table>
</div>
</body>
</html>
Check out this html. Appears fine to me.
<!DOCTYPE html>
<html>
<head>
<title>email blast re films</title>
</head>
<body style="height:height:500px;">
<table border="0" style="width:100%; text-align:center;">
<tr>
<td >
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;margin-top:10%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "wall cuts, train stations, New York City"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
<span style="border-radius: 5px;display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; font-size: 14px; background: #3D87F5; color: white;">Watch my film "red hook, rush hour"</span>
<span style="display:block;margin-left:20%;margin-right:20%;padding-top:10px;padding-right:10px;padding-bottom:10px; font-size: 14px; color: white;border-radius:5px;"> </span>
</td>
</tr>
<tr>
<td style="font-size: 14px; text-align: center; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;">
<a href="http://www.bartonlewisfilm.com" style="display: inline-block; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px; background: #3A8E47;
text-decoration: none; color: white;" title="visit bartonlewisfilm.com" target="_blank;">bartonlewisfilm.com</a> | home (718) 399-8344 | cell (347) 325-4415
</td>
</tr>
</table>
</body>
</html>
I'm trying to find a solution to laying out forms in our app (ported from Silverlight). We like labels to up, are trying to do this without tables, but there's a fundamental problem that tables solve I'm not sure how to address any other way.
Here is an example (plnkr):
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 1.1rem;
border-bottom: 1px solid #ccc;
}
td {
vertical-align: top;
padding-bottom: 0.5rem;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan='2'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>
label:
<div>(This label is extra</div>
<div>tall because of these</div>
<div> extra lines.)</div>
</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>this is the longest label:</td>
<td><input placeholder='search for stuff'>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>longer label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
</tr>
<tr>
<td>long label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
<tr>
<td>another label:</td>
<td>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
<div>This content is extra tall.</div>
</td>
</tr>
<tr>
<td>short label:</td>
<td><input placeholder='search for stuff'></td>
</tr>
</table>
</body>
</html>
We have two groups of "label: input" lists, each with their own headings. The leftmost-column adjusts to the width of the widest label in either group, and simultaneously each row also adjust to the height of the tallest element.
How do I achieve this same behavior without tables? When people are talking about "tableless" layout, is that only for things that don't care about content size for their layout?
EDIT:
Uh, sorry. You actually can do more than two elements per line, but (as usual with float: right) you have to put them in reverse order.
If you must not use a table: Add a div for each row and put a invisible horizontal rule between them to keep them from piling onto each other. Also: a float: left to the labels and a float: right to the input boxes. It works, but I would not know how to make a line with three or more elements, like: Born on: Month/Day/Year, work.
Anyway, here is how you can do it.
<!DOCTYPE=html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body {
float: left;
}
hr {
clear: both;
border: none;
}
p{
float: left;
}
form {
float: right;
}
</style>
<body>
<div id = "row_1">
<p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
<form><input type="text" placeholder="Second" /></form>
</div>
<hr />
<div id = "row_2">
<p>short</p>
<form><input type="text" placeholder="First" /></form>
</div>
</body>
</html>
I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>
I'm trying to align a table row of form controls, as in this jsbin example:
http://jsbin.com/umeyud/6
I only care about IE8+, recent Firefox and recent Chrome (sorry Safari & Opera!)
While I can get pretty close, I wish I could get the "Label" on the left to align nicely with the first line of all the text displayed on all the other controls.
An added bonus would be to get the checkboxes to be vertically centered to the middle the first line of text.
Here you go. Enjoy!
I needed 4px for IE & Opera, 6px for the others
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/umeyud/6/edit
-->
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
div
{
display: inline-block;
}
body,td,input,select,textarea
{
font: 14pt Arial
}
.multi td
{
white-space: nowrap;
}
.q, .vAlign
{
padding-top: 0px;
vertical-align: top;
padding-top: 4px;
}
table
{
display: inline-table;
}
</style>
</head>
<body>
<table>
<tr>
<td class="q"><div>Label</div></td>
<td class="a text" style='vertical-align: top'><input type="text" value="Hello, World!"/></td>
<td class="a text" style='vertical-align: top'><textarea>Hello, World!</textarea></td>
<td class="a yesno vAlign" style='vertical-align: top'><div><input type="checkbox"/> </div></td>
<td class="a single" style='vertical-align: top'><select><option>Option 1</option></select</td>
<td class="a multi vAlign" style='vertical-align: top'>
<input type='checkbox'/>Option 1<br>
<input type='checkbox'/>Option 2<br>
<input type='checkbox'/>Option 3
</td>
<td class="a picture"><img src="#" width=160 height=120></td>
</tr>
</table>
</body>
</html>