html中如果对table中的td设置边框样式

html中如果对table中的td设置边框样式,第1张

设置Table的细边框通常有这么几种方式:

1.使用css

2.使用ie中特有的属性,不支持除ie外的浏览器

3.整个表格的背景为黑色,每个单元格背景为白色,单无格间距为1,表格粗细为0

4.直接代码表示(一个style="BORDER-COLLAPSE:collapse"搞定)

扩展资料:

Table控件主要用于在web页面上创建表格,其功能与HtmlTable类似。不同的是,Table控件可以用动态的内容以编程的方式来生成表格。

<Table>定义整个表格,即表格的内容要放在<Table>和</Table>标记中;在<Table>中的主要属性:border属性显示表格的边框,width, height属性定义表格的大小。<caption>标记符用来定义表格的标题。

表格的表示以行为单位,在行中包含列。其中:一个<tr>...</tr>标记表示一行;一个<td>...</td>标记表示一列;<th>... </th>定义表头,一般可以不用。

参考资料来源百度百科  table

总结一下android ui界面里面如何设置边框,以及如何把边框设置成弧形的即圆角。

其实,android的ui里,界面一般都是比较简单的,不会像web页面那样,数据量比较大,关于给android界面(表格)设置边框,其思想很想我们用HTML设计表格然后给它设置边框,如果你懂html的话。即通过给不同的控件设置背景颜色来反衬出边框线

以一个登录界面为例,设置一个有边框线的android 登录界面:

注:本例要求的只是将该TableLayout中的行与行之间用边框线隔开

此例中,采用TableLayout布局,非常简单,里面有3个TableRow,分别放置 用户名、密码、登录按钮,根据上面说的设置边框线只需要设置控件的背景颜色即可。这个例子中要求行与行之间有边框线,那么,就这么想,

TableLayout:是该界面的布局管理器(当然也是一个控件),放在最外层,那么这时你可以给它选一个背景颜色参考注释 a)

TableRow:是表格中的一行,设置边框线重点就在此,它是紧跟着TableLayout的,可以给TableRow(行)设置背景色,参考b)

TableLayout与TableRow关系:可以看成父与子的关系,那么不管怎么样,TableLayout总是大于TableRow,那么通过给二者设置不同的颜色,设置颜色的时候可以让子组件(TableRow)周围稍微留出一点边界(就是它的背景色不会覆盖完整个行,如何让它显示成这样呢=====>android:layout_margin="0.5dip"[此属性即是设置该组件周围留出一点边界])

<?xml version="1.0" encoding="UTF-8"?>

<TableLayout

android:id="@+id/widget30"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

xmlns:android="http://schemas.android.com/apk/res/android"

android:background="#ffcccccc" //a)给tablelayout设置背景色,改背景颜色将会是你要设置的边框线的背景色

android:layout_margin="1dip"

>

<!--android:background="@drawable/view_shape" -->

<TableRow

android:id="@+id/widget40"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:background="#ffffcc99"//b)给tablerow设置背景色

android:layout_margin="0.5dip" //c)非常重要的一点

>

<TextView

android:id="@+id/widget41"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Login Name"

android:textStyle="bold"

android:layout_gravity="center_vertical" //如果想让表格里的列与列(column之间)也有边框线隔开,则同上面一样也要设置android:background="#ffffcc99"与android:layout_margin="0.5dip"

>

</TextView>

<EditText

android:id="@+id/widget42"

android:layout_width="141px"

android:layout_height="wrap_content"

android:textSize="18sp"

android:background="#ffffffff"

android:textColor="#ff000000"

>

</EditText>

</TableRow>

<TableRow

android:id="@+id/widget43"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:background="#ffffcc99"

android:layout_margin="0.5dip"

>

<TextView

android:id="@+id/widget44"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Password"

android:textStyle="bold"

>

</TextView>

<EditText

android:id="@+id/widget45"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="18sp"

android:background="#ffffffff"

android:textColor="#ff000000"

>

</EditText>

</TableRow>

<Button

android:id="@+id/widget46"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Login"

android:textStyle="bold"

android:textColor="#ff000000"

android:layout_margin="2dip"

android:background="#ffffcc33"

>

<!--android:background="@drawable/view_shape" -->

</Button>

</TableLayout>

写了两种方法,你看看吧,也许有用

方法一:<table width="200px" height="200px" frame="box">

<tr>

<td style="border:1px solid red"></td>

<td style="border:1px solid red"></td>

</tr>

<tr>

<td style="border:1px solid blue" colspan="2"></td>

</tr>

<tr>

<td style="border:1px solid red" colspan="2"></td>

</tr>

<tr>

<td style="border:1px solid blue" colspan="2"></td>

</tr>

</table>

这种方法是设置行内每个单元格的样式

方法二:

<table width="200px" height="200px" frame="box">

<tr bordercolor="#FF0000">

<td ></td>

<td></td>

</tr>

<tr bordercolor="#FF0000" >

<td colspan="2"></td>

</tr>

<tr bordercolor="#FF0000" >

<td colspan="2"></td>

</tr>

<tr bordercolor="#FF0000" >

<td ></td>

</tr>

</table>

两个方法的<table></table>标记里都加frame="box"


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7979740.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存